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内 容 所 要 


本 书 从 前 端 开发 人 员 的 需求 出 及 ， 以 “ 演 ” 为 线索 ， 从 结构 、 内 容 到 
美化 装饰 等 方面 ， 全 面 且 深入 地 讲解 前 器 开发 人 员 必 须 了 解 和 掌握 的 大 
量 的 CSS 知 识 点 。 同 时 ， 作 者 结合 多 年 的 从 业经 验 ， 通 过 大 量 的 实战 案 
例 ， 详 尽 解析 CSS 的 相关 知识 与 常见 问题 。 作 者 还 为 本 书 开 及 了 专门 的 
配套 网 站 ， 进 行 实例 展 示 、 问 题 答疑 。 








作为 一 本 CSS 深 度 学 习 的 书 ， 书 中 介绍 大 量 许多 前 端 开发 人 员 都 不 
知道 的 CSS 知 识 点 。 本 书 语言 通俗 易 懂 ， 内 容 深 入 浅 出 ， 并 结合 实战 经 
验 ， 更 适合 对 CSS 有 所 了 解 的 前 端 开 发 人 员 阅读 。 通 过 阅读 本 书 ， 读 者 
会 对 CSS 世 界 的 深度 和 广度 有 一 个 全 新 的 认识 。 
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我 是 一 个 利他 主义 非常 明显 的 人 ， 这 多 半 与 小 时 候 都 是 在 他 人 的 大 
助 下 成 长 有 关 ， 和 帮助 我 的 有 亲戚 、 邻 大 、 老 师 ， 以 及 很 多 不 认识 的 人 。 
所 以 ， 现 在 的 目 己 总 是 很 乐意 帮助 他 人 成 长 。 











我 从 2007 年 恋 大 三 的 时 候 开 始 接触 并 使 用 CSS， 到 现在 已 经 整整 10 
年 了 ， 在 这 10 年 时 间 里 ， 我 从 未 间断 过 对 CSS 的 研究 和 学 习 。 现 在 想 
想 ， 能 够 坚持 下 来 还 真是 不 容易 ， 其 核心 动力 其 实 就 是 上 面 的 “帮助 他 
人 威 陨 目 我 ”% 











开始 的 时 候 ， 我 和 大 多 数 人 一 样 ， 因 为 CSS 简 单 ， 一 开始 成 长 很 
快 ， 页 面 写 多 了 之 后 还 能 够 总 结 出 一 些 准 则 之 类 的 东西 ， 并 目 我 感觉 民 
好 ， 或 许 是 目 己 运气 好 ， 误 打 误 撞 走 出 了 庐山 幻境 ， 突 破 了 学 习 CSS 的 
一 个 又 一 个 上 瓶颈 。 但 是 ， 在 与 诸多 同行 的 邮件 交流 中 我 发 现 ， 很 多 CSS 
开发 人 员 感 到 迷茫 ， 职 位 得 不 到 重视 ， 技 术 也 无 法 提高 ， 我 感觉 邮件 的 
交流 一 次 最 多 只 能 帮助 一 个 人 ， 效 率 实在 太 低 。 








人 在 做 抉择 的 时 候 是 需要 有 一 些 指引 的 。 实 际 上 ， 很 多 年 前 ， 我 自 
己 曾 犹 驳 过 ， 是 否 要 继续 深入 学 习 CSS， 探 索 每 一 个 边界 ， 因 为 对 于 个 
人 而 言 ， 这 会 是 一 件 吃力 不 讨好 的 事情 ， 对 于 CSS 这 门 语言 ，3 年 学 习 
80 分 和 10 年 学 习 90 分 对 于 产品 价值 的 区 别 其 实 有 限 。 但 那 一 封 封 交流 邮 


件 坚定 了 自己 的 方向 ， 艰 苦 的 路 让 我 一 个 人 走 就 好 了 ， 等 我 踏 遍 整个 
CSS 世 界 ， 再 把 完整 的 地 图 绘制 出 来 ， 岂 不 就 能 帮助 更 多 人 了 ? 


所 以 ， 随 着 自己 的 不 断 前 行 ， 映 边 的 人 越 来 越 少 ， 少 到 好 像 就 我 一 
个 人 ， 无比 孤 我 的 时 候 ， 让 我 坚持 下 来 的 束 是 “日 后 可 以 帮助 更 多 和信， 
是 很 有 价值 的 ”的 信念。 


10 年 过 去 了 ，10 年 的 努力 和 付出 终于 开始 开花 结果 ， 而 其 中 一 个 果 
实 就 是 《CSS 世 界 》 这 本 书 。 


10 年 风雨 积累 ， 踏 明 CSS 世 界 的 干 山 万 水 ， 哪 里 有 美景 ， 哪 里 有 秘 
境 ， 哪 里 是 陷阱 ， 哪 里 是 路 径 ， 我 全 了 然 于 心 。 我 这 样 做 为 的 就 是 给 予 
清晰 明确 的 指引 ， 拓 展 对 CSS 世 界 的 认 知 ， 挖 掘 CSS 的 潜力 ， 帮 助 他 人 
突破 一 个 又 一 个 CSS 学 习 的 瓶颈 。 


为 何 需要 这 本 CSS 进 阶 书 


大 家 应 该 都 注意 到 了 ， 最 近 行 业 非 常 缺 前 端 开 发 人 员 ， 前 端 开发 人 
员 培 训 机 构 也 如 雨 后 春 算 般 大 量 涌现 。 拨 开眼 前 的 面纱 ， 定 睛 一 看 ， 会 
发 现 ， 缺 的 其 实 不 是 前 器， 而 是 优秀 的 、 有 资历 的 、 技 术 有 深度 的 前 端 
于 人 








通过 和 一 些 前 端 同行 、 某 些 人 力 资源 接触 和 我 收 到 的 诸多 简历 我 发 
现 ， 目 前 的 现状 是 这 样 的 : 行业 里 有 很 大 一 拨 儿 人 ， 也 自称 为 前 端 开 发 
人 员 ， 但 他 们 仅仅 是 可 以 根据 设计 稿 写 出 页 面 这 种 水 平 。 换 句 话 说 ， 就 
是 会 HTML 和 CSS 以 及 一 点 儿 JavaScript。 环 顾 四 周 ， 这 种 程度 的 人 实在 
是 太 多 了 ， 完 全 没有 任何 技术 上 的 优势 。 虽 然 这 些 也 是 前 端 开 发 人 员 ， 








但 是 公 


司 要 抢 的 前 端 开 发 人 员 并 不 是 这 类 人 
为 什么 会 这 样 呢 ? 








因为 CSS 这 门 语言 入 门 实 在 是 太 人 简单 了 ， 比 如 说 我 夫人 ， 完 全 不 异 





代码 ， 我 手把手 教 她 1 个 星期 ， 写 出 一 个 长 得 像 茶 茶 网 首页 的 页 面 绝 对 
征 没 问题 的 ， 因 为 CSS 常 用 属性 就 那么 多 ， 且 鲜 有 逻辑 ， 无 须 算法 ， 数 








记 各 个 属性 值 对 应 的 特性 就 能 上 手 了 。 所 以 ， 很 多 没有 编程 基础 的 人 ， 





了 驶 通过 HTML 和 CSS 进 入 了 这 个 圈子 。 但 当 他 们 发 现 目 己 可 以 很 愉快 地 
实现 页 面 的 时 候 ， 就 会 觉得 CSS 也 就 这 样 ， 导 致 困 于 庐山 ， 止 步 不 前 ， 





束 算 日 后 昕 到 或 见 到 “CSS 深 入 很 难 ” 的 言论 并 打算 着 手 精进 ， 也 不 知道 
告别 迷 革 。 


接 下 来 该 怎么 走 、 如 何 突破 现 有 的 瓶颈 ， 于 是 就 产生 了 迷 荡 。 
颈 ， 


这 类 高 不 成 低 不 就 的 前 端 人 员 和 急需 本 书 深 入 "CSS 世界 ”， 突 破 瓶 





在 这 个 世界 上 ， 越 是 看 似 简单 的 东西 反而 越 是 难以 深入 ， 束 好 比 为 


何 1+1 等 于 2? CSS 这 门 语言 也 是 如 此 。 很 多 自 认 为 学 了 CSS 有 八 九 成 的 
人 ， 实 际 上 仅仅 是 熟 记 CSSs 手 册 中 的 各 种 属性 ， 或 者 理解 一 些 CSS 概 
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念 ， 再 进一步 ， 甚 至 对 某 一 两 个 CSS 属 性 有 过 深入 的 分 析 。 但 是 ， 这 些 
人 依然 无 法 理解 很 多 页 面 上 看 似 简单 的 现象 〈 我 想 更 多 的 是 根本 惑 没 在 
意 这 些 现 象 ) ， 也 无 法 基于 现 有 的 规则 创造 一 些 完全 创新 的 CSS 实 现 ， 
仅仅 停留 在 熟练 地 使 用 这 种 程度 。 


为 什么 会 这 样 呢 ? 那 是 因为 CSS 是 一 门 有 别 于 传统 程序 语言 的 语 





绝 大 多 数 编程 语言 ， 比 方 说 JavaScript， 各 种 字符 串 、 数 组 、 方 法 
记 住 一 个 就 是 一 个 ， 使 用 的 时 候 ，forEach() 就 是 循环 ，replace() 


就 是 替换 ， 不 要 担心 执行 replace() 的 时 候 字 符 串 突然 增加 了 ! 很 多 人 
就 是 用 这 种 思路 学 习 CSS 的 ， 导 致 很 快 就 遇 到 了 天 花 板 。 为 什么 呢 ? 这 
是 因为 ， 在 CSS 的 世界 里 ， 页 面 上 的 任何 看 似 简 单 的 呈现 都 是 由 许 许多 
多 CSS 属 性 共同 作用 的 结果 。 例 如 ， 对 于 一 个 图 片 浮动 ， 单 纯 认为 只 
有 float 在 工作 是 不 全 面 的 ， 实 际 上 ， 行 高 、 字 体 、 鼠 标 手 形 等 都 在 暗 
地 里 “搞鬼 ?>， 此 时 如 果 仅 仅 套用 一 两 个 CSS 属 性 值 应 有 的 表现 来 理解 ， 
是 根本 理解 不 了 的 。 换 句 话说 ， 有 些 人 的 CSS 水 平 之 所 以 停滞 不 前 ， 是 
因为 他 们 没有 把 所 有 的 CSS 当 作 一 个 整体 ， 放 在 一 个 完整 的 世界 中 去 看 
待 。 所 以 ， 没 有 比 “ 学 CSS 看 看 CSS 中 文 手册 就 够 了 ”更 思春 的 言论 了 ， 
手册 仅仅 是 表层 的 、 独 立 的 一 些 特性 ， 每 个 CSS 属 性 在 CSS 世 界 中 都 是 
有 其 存在 的 原因 的 ， 都 是 和 其 他 多 个 CSS 属 性 发 生 着 干 丝 万 缕 的 关系 
的 ， 这 背后 的 种 种 远 比 他 们 想象 得 要 庞大 很 多 。 














而 本 书 完 完全 全 区 别 于 传统 教条 式 的 手册 或 参考 书 或 教程 之 类 ， 一 
步 一 步 带 领 读者 接触 真正 丰富 多 彩 、 妙 趣 横生 的 CSS 世 界 ， 一 番 畅 快 自 
在 的 CSS 世 界 之 旅 下 来 ， 读 者 一 定 会 得 到 不 一 样 的 “洗礼 ”， 困 扰 多 年 的 
CSS 成 长 瓶 希 说 不 定 就 会 不 知 不 沉 地 突破 了 。 





如 何 正 确认 识 本 书 


首先 ， 大 家 务必 明确 这 一 点 ， 那 就 是 本 书 的 所 有 内 容 都 是 我 个 人 的 
理解 。 没 错 ， 是 人 的 理解 ， 不 是 干巴 巴 的 文档 。 这 些 理解 是 我 自己 多 年 
持之以恒 对 CSS 研 究 和 思考 后 ， 经 过 个 人 情感 润 饰 和 认 知 提炼 加 工 的 产 
物 ， 完 全 是 我 自己 所 理解 和 认识 的 CSS 世 界 ， 可 能 是 不 具有 权威 性 的 。 
写 这 本 书 主要 是 希望 通过 分 享 自己 的 心得 给 对 CSS 感 兴趣 的 各 个 领域 的 
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人 以 局 迪 ， 引 发 其 思考 ， 或 者 使 其 有 不 一 样 的 感悟 。 





从 为 一 方面 讲 ， 本 书 正 是 因为 其 内 容 部 是 经 过 人 这 个 个 体 的 加 工 ， 
并 融入 了 情感 化 的 思维 ， 才 能 做 到 有 的 放 天 、 通 俗 易 懂 。 我 们 大 多 数 人 
都 是 感性 的 ， 看 伤感 电影 会 吴 ， 看 综艺 节目 会 灾 。 所 以 ， 与 干巴 巴 的 教 
条 式 的 技术 书籍 相 比 ， 本 书 的 表达 方式 和 语言 风格 更 能 给 人 以 心灵 的 局 
迪 。 读 完 之 后 ， 读 者 可 能 会 有 这 样 的 想法 : 要 是 所 有 的 技术 书 都 这 么 写 
束 好 了 。 








另外 ， 本 书 不 是 技术 文档 ， 也 不 是 参考 手册 ， 因 此 知识 点 不 会 面 面 
俱 到 ， 也 残 是 说 ， 不 少 CSS 相 关 的 内 容 我 会 忽略 ， 例 如 ， 选 择 堪 这 一 部 
分 最 多 提 一 下 。 同 时 ， 为 了 保证 书 的 内 容 足 够 简练 ， 简 单 的 CSS 语 法 和 
常规 的 使 用 在 本 书 中 基本 上 不 会 提 及 ， 只 会 重点 分 析 在 其 他 地 方 看 不 到 
的 内 容 。 


配套 网 站 


我 专门 为 本 书 制作 了 一 个 网 站 (http://www.cssworld.cn ) ， 在 这 个 
配套 网 站 读者 可 以 了 解 更 多 关于 本 书 或 者 我 个 人 的 一 些 信息 。 





最 后 ， 由 于 很 多 内 容 都 是 个 人 理解 ， 难 免 会 有 不 准确 或 者 让 大 家 产 
生 怀 疑 的 地 方 ， 欢 迎 去 官方 论坛 http://bbs.cssworld.cn/ 对 应 版 块 进行 提问 
或 反馈 。 
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要 深入 理解 一 个 事物 之 前 ， 最 好 先 对 其 整体 有 个 大 概 了 解 ， 这 样 才 
不 至 于 蕊 测 管 观 。 如 果 把 CSS 比 作 一 座 大 山 ， 则 我 们 对 整体 的 认 知 束 好 
比 知道 这 座 山 的 位 置 、 山 势 、 道 路 状况 每， 这样， 当 我 们 深入 其 中 的 时 
候 ， 束 不 容易 迷路 ， 不 会 做 出 错误 的 决策 。 


例如 ， 对 CSS 这 门 语言 特性 的 描述 束 有 助 于 对 CSS 的 整体 认 知 。 具 
体 表 现 为 : 擅长 C++ 或 者 Java 之 类 的 程序 员 学 习 CSS 往 往 没 有 如 鱼 得 水 
的 感觉 ， 其 背后 的 原因 是 ， 典 型 的 计算 机 开发 语言 看 重 逻 辑 思维 和 抽象 
能 力 ， 但 是 CSS 这 门 语言 本 身 并 无 逻辑 可 言 ， 看 重 的 是 特性 间 的 相互 联 
系 和 具象 能 


具象 往往 以 情感 为 纽带 ， 无 意识 不 自觉 产生 ， 是 非常 感性 的 一 种 能 
力 ， 这 往往 是 偏 理 性 的 程序 员 所 不 擅长 的 。 在 某 些 程序 员 眼 中 ，CSS 属 
性 就 是 干巴 巴 的 属性 ， 无 法 建立 类 似 “ 人 与 人 关系 ”这 种 很 情感 化 的 联 
系 ， 于 是 学 习 CSS 总 是 只 得 其 形 、 不 得 其 髓 。 





当然 ， 认 知 可 以 从 多 个 角度 进行 。 例 如 ， 接 下 来 要 介绍 的 CSS“ 世 
界 观 " 以 及 CSS 的 历史 故事 ， 可 以 让 我 们 多 种 角度 同时 进行 认 知 ， 对 CSS 
这 门 语言 的 理解 更 为 准确 和 丰满 。 

1.1 CSS 世界 的 “世界 观 ” 


对 于 CSS 这 门 语言 ， 我 学 习 和 研究 已 经 有 10 年 之 久 ， 在 点 点 滴 滴 的 


积累 中 ， 逐 渐 形 成 了 一 套 完 整 的 体系 。 在 CSS 这 个 世界 中 ，CSS 并 不 是 
一 个 机 械 枯燥 的 语言 ， 所 有 属性 都 是 有 血 有 肉 、 有 着 不 同 个 性 和 身世 的 
个 体 。 不 同 的 个 体 可 以 碰撞 出 不 同 的 火花 ， 激 荡 出 异彩 纷呈 的 故事 。 


























这 里 ， 我 们 不 妨 “ 脑 洞 大 开 ” 一 下 : 如 果 把 CSS 世 界 拍 成 动漫 的 话 ， 会 是 


什么 样子 ? 




















首先 ， 动 漫 名 可 以 叫 作 《建筑 神 域 》， 讲 述 一 群 建筑 魔法 师 为 国家 存亡 
惊心动魄 战斗 的 故事 。 然 后 ， 出 现 了 *Chrome 王 国 ” 的 几 位 建筑 魔法 师 日 常 训 
练 的 画面 。 只 见 名 为 width 的 魔法 师 手 持 名 叫 选 择 器 的 法 器 ， 准 确 指向 称 为 
<divy> 的 最 普通 的 块 状 建筑 魔法 石 ， 口 中 念 道 :“ 层 登 天 星 ， 约 化 有 形 ， 
50%， 变 ! ”只 听见 一 声 清 脆 的 “ 哟 ”，<divy> 魔法 石 宽度 变 成 了 原来 的 一 半 。 
然而 ，width 却 锁 眉 摇 头 ， 口 中 喃 喃 念 道 :“1 坚 秒 ， 还 不 够 快 ， 还 要 再 练 ， 
不 然 在 和 “IE 王国 的 战斗 中 很 难 占 得 先 机 ! ”( 如 图 1-1 所 示 ) 。 


层 埃 天 星 ， 幻化 有 形 ，50% , 变 ! 
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图 1-1 CSS 世界 观 示 意 1 


此 时 ，width 突然 发 现 前 面 1 米 之 处 有 一 块 <span> 之 石 ， 具 
有 class="test" 的 特殊 标记 ， 立 即 拿 出 法 器 ， 念 道 : “类 名 之 石 ，test 为 
名 ， 为 我 选择 ， 出 ! ”话音 刚 落 ，<span> 之 石 蓝 色 荧光 一 内 ， 明 眼 人 都 能 
出 来 ，width 魔法 师 和 <span> 魔法 石 现在 处 于 契约 状态 。width 继续 念 
道 :“ 层 登 天 星 ， 约 化 有 形 ，50%， 变 ! ”但 <span> 魔法 石 却 没 有 任何 变 
化 ， 此 时 width 一 拍 自己 的 脑门 ， 似 乎 明白 了 什么 ， 转 过 头 对 旁边 的 
display 魔法 师 大 声 叫 道 :“ 小 D， 这 边 这 边 ， 过 来 帮 个 忙 .……: 来 呀 ， 快 
占 99 



























































只 见 display 迅速 结束 自己 的 练习 ， 屁 颠 屁 颠 跑 过 来 :“ 咋 啦 ? ” 


“此 为 内 联 之 石 ， 我 无 法 驾驭 ， 你 帮 我 重 塑 一 下 。” 














“小 问题 ! 正好 ， 魔 法 师 技 能 委员 会 刚 通过 了 我 的 一 个 新 法 术 ， 我 给 你 


秀一 秀 ?” 


“ 哟 ， 不 错 啊 ， 快 让 我 酌 酌 ! ” 





“好 嘲 ! ”只 见 display 拿 出 自己 的 法 器 ， 念 道 : “类 名 之 石 ，test 为 
名 ， 为 我 选择 ， 出 ! ” 紧 接 着 ， “ 层 县 天 星 ， 幻化 有 形 ， flex, 变 ! 后 























只 听见 一 声 清脆 的 “ 啦 *”， 在 两 人 的 合作 之 下 ，<span> 魔法 石 宽度 也 变 
化 了 “如 图 1-2 所 示 ) 。 


要 SS 


图 1-2 CSS 世界观 示意 2 








“ 哟 ， 很 栈 嘛 ! ”width 对 display 竖 着 大 拇指 称赞 道 





只 见 display 采 肤 一 笑 ， 小 手 在 面前 轻 轻 一 挥 : “就 算 你 这 么 夸 我 ， 人 
家 也 不 会 开心 的 啦 ..…….. 3 





从 上 面 的 描述 可 以 看 出 ， 在 CSS 世 界 中 ，HTML 是 魔法 石 ， 选 择 器 
就 是 选择 法 絮 ，CSS 属 性 就 是 魔法 师 ，CSS 各 种 属性 值 就 是 魔法 师 的 魔 
法 技能 ， 浏 览 器 就 是 他 们 所 在 的 “王国 ”,“ 王 国 ” 会 不 断 更 新 法 律 法 规 
(版 本 升级 ) ， 决 定 是 人 否 允 许 使 用 新 的 魔法 石 HTML5 新 标签 新 属 
性 ) ， 是 否 允 许 新 的 魔法 师 入 “国籍 ”CCSS3 新 属性 ) ， 或 者 允许 魔法 师 








使 用 某 些 新 技能 〈CSS 新 的 属性 值 ) ， 以 及 是 否 舍 弃 菜 些 魔法 技能 (如 
display:run-in ) ; 操作 系统 就 是 他 们 所 在 的 世界 ， 不 同 的 操作 系统 
代表 不 同 的 平行 世界 ， 所 以 ，CSS 志 界 有 这 么 几 个 比较 大 的 平行 世界 ， 

即 Windows 世 界 、OS XX 世界 以 及 移动 端的 OS 世界 和 Android 世 界 。 不 同 
世界 的 浏览 器 王国 的 命运 不 一 样 ， 例 如 ， 在 OS X 世 界 中 ， 正 王国 是 不 存 
在 的 ， 而 Safari 王 国 却 异 党 强大， 但 在 Windows 世 界 中 ，Safari 王 国 却 异 


IZ sh pz 


吊 洛 喘 。 
以 上 这 一 切 就 构成 了 完整 的 CSS 世 界 的 “世界 观 ”。 
下 面 回 答 一 个 很 重要 的 问题 ， 为何 要 这 样 认识 CSS 世 界 呢 ? 


首先 ， 将 抽象 的 CSS 直 接 和 具体 的 现实 世界 相对 应 ， 更 加 易于 理 
解 。 试 想 一 下 ， 对 于 普通 人 ， 理 解 魔法 师 和 魔法 石 是 不 是 要 比 理解 CSS 
代码 容易 得 多 ? 其次， 以 完整 的 体系 来 学 习 CSS 要 比 单纯 关注 属性 值 理 
解 得 更 加 深刻 ， 可 以 塔 养 从 宏观 层面 认识 与 理解 CSS 的 习惯 。 再 次 ， 这 
也 方便 我 们 记忆 ， 村 燥 的 代码 总 是 过 目 就 筷 ， 鲜 活 的 角色 总 是 印象 深 
刻 。 最 后 ， 这 样 也 可 以 让 本 书 散发 出 与 众 不 同 的 气质 。 














1.2 世界 都 是 创造 出 来 的 


世界 都 是 创造 出 来 的 。 很 自然 ，CSS 世 界 也 是 一 点 一 点 创造 出 来 
的 。 这 世间 上 的 事情 只 要 发 生 了 ， 都 是 有 原因 的 。CSS 世 界 的 出 现 也 不 
例外 。 


下 面 我 们 就 来 看 一 人 CSS 世界 出 现 的 历史 。 虽 然 我 知道 ， 有 些 人 对 
这 些 历史 可 能 不 感 兴趣 ， 但 是 要 想 深 入 理解 CSS 属 性 的 一 些 设 计 原 因 、 





表现 原理 还 真 离 不 开 当 时 的 历史 环境 。 


大 家 可 能 都 听 说 过 马云 1995 年 去 美国 ， 第 一 次 接触 了 互联 网 ， 在 这 
个 时 间 点 ，HTML 才 是 第 一 版 且 诞 生 没 几 年 ，W3C 才 刚刚 成 立 ，CSS 还 
没 出 现 。 那 时 候 的 互联 网 几乎 都 是 文字 信息 ， 显 示 一 张 图 片 都 是 要 上 天 
的 感觉 。 











大 家 可 能 没 意 识 到 ， 那 个 时 候 前 端的 发 展 和 现在 一 样 快 ， 设 计 师 要 
求 越 来 越 多 ，HTML 也 越 来 越 庞杂 。 急 需要 其 他 专门 负责 样式 的 语言 ， 
据说 当时 有 几 个 样式 表 语 言 ， 最 后 是 CSS 胜 出 了 ， 为 什么 呢 ? 它 的 胜出 


靠 的 是 “ 层 登 ?特性 。 











CSS 全 称 是 Cascading Style Sheets， 翻 译 成 中 文 台 是 “ 层 登 样式 表 ”。 
所 谓 “ 层 登 *， 顾 名 思 义 ， 就 是 样式 可 以 层 层 累加 ， 比 方 说 页 面 元 素 都 继 
承 了 12 像 素 的 大 小 ， 某 标题 就 可 以 设置 成 14 像 素 进 行 登 加 。 人 发 现 没 ? 这 
种 层 登 策略 对 于 样式 的 显示 是 相当 的 灵活 。 








于 是 ， 从 1996 年 12 月 17 日 CSS1 诞 生 后 ，CSS 在 样式 呈现 领域 可 谓 所 
向 披 靡 ， 没 有 过 到 任何 竞争 对 手 。1998 年 5 月 12 日 CSS2 发 布 ， 推 行内 容 
和 表现 分 离 ， 表 格 (table) 布局 开始 落寞 。 


1998 年 腾讯 、 新 浪 和 网 易 成 立 ， 当 时 搜狐 则 成 立 1 年 不 到 。 那 个 时 
候 是 门户 的 时 代 ， 人 们 更 关注 的 是 信息 的 获取 ， 所 以 网 站 的 功能 主要 就 
是 信息 展示 ， 信 息 是 什么 ?在 那个 时 代 ， 在 互联 网 领域 ,信息 就 是 图 片 
和 文字 。 换 名 话说 ， 那 时 候 的 网 站 前 端 技术 关心 的 是 图 片 和 文字 的 呈 
现 ， 而 CSS2《〈 包 括 9 年 之 后 ， 也 就 是 2007 年 才 出 现 的 CSS2.1) 都 是 为 图 
文 展 示 服 务 的 。 

















我 再 重复 一 这: CSS 世 界 的 诞生 就 是 为 图 文 信息 展示 服务 的 。 这 
句 话 在 本 书 中 会 非常 频繁 地 出 现 ， 知 道 这 一 点 你 就 会 明白 很 多 事情 。 





好 ， 下 面 让 我 们 回 到 本 节 开 头 的 那 句 话 一 一 “世界 都 是 创造 出 来 
的 ”! 为 何 我 要 反复 强调 这 人 句 话 呢 ? 如 果 站 在 造物 主 的 角度 去 思考 CSS 
世界 的 种 种 表现 ， 很 多 问题 束 会 迎刃而解 。 





现在 给 你 机 会 当 一 回 造物 主 ， 让 你 自己 重新 构建 一 个 CSS 世 界 ， 唯 
一 的 要 求 就 是 ， 这 个 世界 要 非常 便于 图 片 和 文字 的 呈现 ， 你 会 去 如 何 构 
建 呢 ? 

1.3 CSS 完胜 SVG 的 武器 


J 
WI 





在 2003 年 1 月 ，SVG 1.1 被 确立 为 W3C 标 准 。 你 没 看 错 ， 是 2003 年 。 
要 知道 ，CSS 2.1 是 2007 年 才 发 布 的 。 考 虑 到 SVG 开始 火 起 来 是 最 近 几 
年 ， 也 就 是 差不多 10 年 的 时 间 ，SVG 都 默默 无 闻 ， 鲜 有 人 问津 ， 到 底 是 
怎么 回 事 呢 ? 





很 多 人 认为 SVG 的 竞争 对 手 是 Flash。 对 ， 是 竞争 对 手 。 但 是 ， 现 在 
看 来 ，SVG 显 然 要 比 Flash 优 秀 很 多 ，SVG 开 放 、 标 准 ， 和 CSS 和 
JavaScript 都 能 很 方便 地 进行 交互 ， 如 果 单 纯 SVG 和 Flash 比 ， 难 说 谁 胜 
谁 负 。 在 我 看 来 ， 造 成 SVG 被 冷落 10 年 的 原因 不 是 别 的 ， 正 是 看 似 毫 不 
相关 的 CSS，SVG 是 被 CSS 给 打败 的 。 


正如 上 面 提 到 的 ， 在 很 长 一 段 时 间 里 ， 网 站 的 主要 功能 都 是 图 片 和 
文字 信息 的 展示 ， 但 是 ，SVG 的 强项 是 图 形 ， 其 文字 内 容 的 呈现 实在 不 
敢 茶 维 。 举 个 例子 ， 在 CSS$ 中 写 上 一 段 文 字 ， 这 段 文字 会 目 然 换 行 、 多 











行 显示 ， 于 是 ， 可 以 像 书 本 一 样 阅读 ， 但是， 在 SVG 中 ， 文 字 要 自动 折 
行 ， 感觉 有 点 儿 赶 蚊子 上 架 一 一 强人 所 难 。 人 家 一 看 ，SVG 连 基本 的 文 
字 排 版 都 做 不 好 ， 要 SVG 何 用 ? 于 是 ，SVG 被 “ 打 入 冷 宫 ”，CS5S 一 如 既 
往 被 重用 。 








但 是 ， 如 今 技术 得 到 了 发 展 ，Web 呈 现 更 加 复杂 和 丰富 多 彩 ， 图 文 
显示 仪 仪 古 网 页 功能 的 一 部 分 ， 于 是 ， 矢 量 且 图 形 领域 左 有 造 讶 的 SVG 
开始 迎 来 了 自己 的 第 一 春 。 











不 知 大 家 有 没有 思考 过 这 样 的 问题 : 为 什么 CSS 世 界 的 图 文 显 示 能 
力 那么 强 ? 为 什么 它 可 以 抑制 SVG 这 么 多 年 ? 


1.3.1 何 为 “ 流 ” 


和 CSS 有 过 亲密 接触 的 人 一 定 昕 过 “文档 流 ” 这 个 概念 ， 我 个 人 总 是 
习惯 把 “文档 ”一 字 去 掉 ， 直 接 称 为 “ 流 ”( 纯 粹 个 人 爱好 ， 因 为 够 简 
洁 ) 。 听 过 和 它 的 人 很 多 ， 但 是 ， 深 入 思考 过 “ 何 为 流 ? ”这 个 问题 的 人 怕 
是 就 没 这 么 多 了 。 





那 完 竟 CSS 世 界 中 的 “ 流 ” 指 的 是 什么 呢 ? “ 流 ? 实 际 上 是 CSS 世 界 中 
的 一 种 基本 的 定位 和 布局 机 制 ， 可 以 理解 为 现实 世界 的 一 套 物 理 规 
则 ,“ 流 ? 跟 现 实 世 界 的 “水 流 ” 有 异曲同工 的 表现 。 


现实 世界 中 ， 如 果 我 们 让 水 流入 一 个 容器 ， 水 面 一 定 是 平整 的 ， 我 
们 在 水 里 面 放 入 物体 ， 如 普通 的 木头 ， 此 时 水 位 就 会 上 升 ， 木 头 多 半 浮 


征 理 所 当然 的 ， 因 为 这 就 是 我 们 从 小 接触 的 一 套 物 理 规 则 。 我 们 知道 这 
套 规 则 ， 就 可 以 理解 现象 ， 并 且 预 知 现象 。 例 如 ， 水 量 超过 容 堪 的 容积 
很 多 ， 我 们 就 可 以 预测 到 水 会 洪 出 来 。 


感谢 物理 学 ， 它 让 我 们 理解 CSS 世 界 的 “ 流 ? 就 轻松 多 了 。CSS 世 界 
的 * 流 ”似乎 就 是 按照 物理 世界 的 “水 流 ” 创 造 的 。 





CSS 世 界 构建 的 基石 是 HTML， 而 HTML 最 具 代 表 的 两 个 基石 <div> 
和 <span> 正好 是 CSS 世 界 中 块 级 元 素 和 内 联 级 元 素 的 代表 ， 它 们 对 应 
的 正 是 图 1-3 所 示 的 盛 水 容器 中 的 水 和 木头 ， 其 特性 表现 也 正如 现实 世 
界 的 水 和 木头 ， 如 图 1-4 所 示 。 











水 流 会 自动 铺 满 容器 放 入 木头 ， 水 位 升 高 ， 木 头 依次 排列 
图 1-3 流 
div 自 动 铺 满 容器 图 片 文 字 依 次 排列 ， 不 足 则 换行 











图 1-4 ”CSS 世界 构建 的 基石 HTML 








所 以 ， 所 谓 “ 流 ”， 就 是 CSS 世 界 中 引导 元 素 排 列 和 定位 的 一 条 看 不 


见 的 “水 流 ”。 
1.3.2 ” 流 是 如 何 影响 整个 CSS 世 界 的 


在 CSS2.1 时 代 ， 我 们 直接 称 CSS 为 “ 流 的 世界 ?真是 一 点 儿 也 不 为 
过 ， 整 个 CSS 世 界 几 乎 就 是 围绕 * 流 ”来 建立 的 ， 那 么 流 是 如 何 影 响 整个 
CSS 世 界 的 呢 ? 


(1) 扒 贼 先 扒 王 。 因 为 CSS 世 界 的 基石 是 HTML， 所 以 只 要 让 
HTML 默 认 的 表现 符合 “ 流 ”， 那 么 整个 CSS 世 界 就 可 以 被 “ 流 ? 统 治 ， 而 
事实 就 是 如 此 ! 


(2) 特殊 布局 与 流 的 破坏 。 如 果 全 部 都 是 以 默认 的 “ 演 ” 来 泻 染 ， 
我 们 只 能 实现 类 似 W3C 那 样 的 文档 网 页 ， 但 是 ， 实 际 的 网 页 是 有 很 多 复 
杂 的 布局 的 ， 怎 么 办 ?可 以 通过 破坏 “ 演 ” 来 实现 特殊 布局 。 实 际 上 ， 还 
是 和 “ 流 ” 打 交道 。 





(3) 流 回 的 改变 。 默 认 的 流向 是 “一 江 春 水 辐 东 流 ”， 以 及 “ 飞 流下 
下 三 干 尺 ”*。 然 而 ， 这 种 流 同 我 们 是 可 以 改变 的 ， 可 以 让 CSS 的 展现 更 
为 丰富 。 因 此 , “文档 流 从 左 往 右 目 上 而 下 ”这 种 说 法 是 不 严 齐 的 ， 大 家 
一 定 要 纠正 过 来 。 





好 了 ， 下 面 我 想 反 问 大 家 : 如 果 你 是 造物 主 ， 你 会 想到 设计 “ 流 ” 这 
僚机 制 来 实现 强大 的 图 文 排列 功能 吗 ? 











好 好 想 一 想 .…… 是 不 是 觉得 目前 CSS 的 设计 还 是 很 有 智慧 的 ? 如 果 
你 来 重新 设计 CSS， 实 现 图 文 排列 ， 你 是 否 还 有 其 他 的 设计 思路 ， 比 方 
说 “亲缘 机 制 * 之 类 ? 


适当 地 反问 这 些 问题 ， 通 过 逆向 思维 ,会 让 我 们 对 CSS 世 界 有 男 外 
一 个 角度 的 认识 。 


1.3.3 ”什么 是 流体 布局 


所 谓 “ 流 体 布局 ”， 指 的 是 利用 元 素 “ 流 ”的 特性 实现 的 各 类 布局 效 
果 。 因 为 “ 流 ” 本 身 具 有 自 适 应 特性 ， 所 以 “流体 布局 ”往往 都 是 具有 自 适 
应 性 的 。 但 是 , “流体 布局 ”并 不 等 同 于 * 自 适应 布局 ”"。“ 自 适应 布局 ”是 
对 凡是 具有 自 适 应 特性 的 一 类 布局 的 统称 , “流体 布局 ”要 狭 窗 得 多 。 例 
如 ， 表 格 布局 也 可 以 设置 为 100% 自 适应 ， 但 表格 和 “ 流 ” 不 是 一 路 的 ， 
并 不 属于 “流体 布局 ”。 























CSS 中 最 常用 的 魔法 石 ， 也 就 是 最 常 使 用 的 HTML 标 签 ， 是 <div> 
， 而 <div> 是 典型 的 具有 “ 流 ” 特 性 的 元 素 ， 因 此 ， 曾 经 风靡 的 “div+CSS 
布局 ”， 实 际 上 指 的 就 是 这 里 的 “流体 布局 ”。 


1.4 CSS 世界 的 开启 从 下 8 开始 


本 书 书 名 为 《CSS 世 界 》， 这 里 的 “世界 * 特 指 的 是 CSS2.1 的 世界 ， 
并 不 包括 CSS3，CSS3 的 世界 更 为 庞杂 和 宏大 ， 但 CSS2.1 的 世界 已 经 足 
够 我 们 畅游 很 多 年 了 。 现 在 前 端 技 术 发 展 迅猛 ， 加 上 和 氛围 略 显 浮躁 ， 有 
必要 让 广大 前 端 开 发 人 员 静 下 心 来 认识 CSS2.1 的 世界 ， 人 否则 面 对 CSS3 
的 真正 到 来 ， 只 能 是 浅水 游 尺 、 搬 砖 打 杂 。 


对 CSS2.1 的 全 面 支持 是 从 微软 公司 的 下 8 开始 的 ， 因 此 ， 本 书 中 几 
乎 所 有 特性 、 行 为 表现 都 是 针对 正 8 以 上 浏览 器 的 。 


1.5 table 自己 的 世界 


如 果 我 没 记 错 的 话 ，<table> 比 CSS 还 要 老 ， 也 就 是 CSS 正 式 诞 生 
之 前 ，<table> 就 已 经 出 现 了 。 前 面 提 到 了 * 流 影响 了 整个 CSS 世 界 ”， 
其 中 并 不 包括 <table> 。<table> 有 着 自己 的 世界 ,“ 流 ”的 特性 对 
<table> 并 不 适用 ， 一 些 CSS 属 性 的 表现 ， 如 单元 格 的 vertical- 
align， 也 和 普通 的 元 素 不 一 样 。 





虽然 CSS2.1 加 强 了 和 <table> 的 联系 ， 如 对 table 类 别 的 display 
属性 值 的 支持 等 ， 但 是 本 书 并 不 会 对 <table> 进行 专门 的 介绍 ， 因 为 毕 
竟 不 是 同一 个 世界 的 。 





1.6 CSS 新 世界 一 一 CSS3 





时 代 在 变迁 ， 科 技 在 发 展 ， 人 们 对 互联 网 的 需求 也 在 变化 ， 以 前 的 
以 图 文 展示 为 主 的 门户 网 站 已 经 无 法 满足 用 户 的 需求 。 技 术 总 是 随 着 需 
求 上 友 展 的 ， 正 如 10 年 前 的 图 文 展示 需求 缔造 了 CSS 世 界 一 样 ， 如 今 的 移 
动 互 联网 以 及 硬件 发 展 也 带动 CSS 进 入 了 新 的 世界 。 








(1) 布局 更 为 丰富 。 





。 移动 问 的 帧 起 ， 众 生 了 CSS3 媒 介 碍 询 以 及 许多 啊 应 式 布 局 特性 的 
出 现 ， 如 图 片 元 素 的 srcset 属性 、CSS 的 object-fit 属性 。 

。 弹性 盒子 布局 〈flexible box layout) 终于 熬 出 了 头 。 

。 格 栅 布 局 〈grid layout) 姗 姗 来 迟 。 


(2) 视觉 表现 长 足 进 步 。 





。 圆 角 、 阴 影 和 渐变 让 元 素 更 有 质感 。 

。 transform 变换 让 元 素 有 更 多 可 能 。 

。 filter 滤 镜 和 混合 模式 让 Web 轻 松 变 成 在 线 的 Photoshop; 
。 animation 让 动画 变 得 非常 简单 。 








上 面 提 到 的 全 部 都 是 CSS3 的 新 属性 。 因 为 CSS3 的 设计 初衷 是 为 了 
实现 更 丰富 、 更 复杂 的 网 页 ， 所 以 基本 上 和 “ 流 ” 的 关系 并 不 大 。 可 以 
说 ， 和 CSS2 相 比 CSS3 就 是 一 个 全 新 的 世界 ， 更 加 丰富 ， 更 加 规范 ， 更 
加 体系 化 ， 也 更 加 复杂 。 考 虑 到 CSS3 尚 未 完全 成 型 ， 且 自己 尚未 有 足 
够 深入 的 研究 ， 无 法 同时 驾驶 太 复 如 的 内 容 ， 因 此 ， 本 书 不 会 深入 
CSS3 的 知识 点 。 





第 2 革 ”项 提前 了 解 的 术语 和 概念 


2.1 务必 了 解 的 CSS 世 界 的 专业 术语 


尽管 本 书 内 容 会 用 很 轻松 的 方式 表达 ， 但 还 是 避免 不 了 会 出 现 一 些 
CSS 领 域 的 专业 术语 。 因 此 ， 在 学 习 技 术 内 容 之 前 ， 我 们 需要 先 了 解 一 
下 CSS 世 界 里 的 一 些 专业 术语 。 





首先 ， 假 设 我 们 现在 有 如 下 一 段 音 见 的 CSS 代 码 : 


.Vocabulary { 


height: 99px; 
color: transparent; 


} 





下 面 就 针对 这 上 段 代 码 ， 逐 一 引出 其 涉及 的 专业 术语 。 
1. 属性 





属性 对 应 的 是 平常 我 们 书面 或 交谈 时 对 CSS 的 中 文 称谓 。 例 如 ， 上 
面 示意 CSS 代 码 中 的 height 和 color 就 是 属性 。 当 我 们 聊天 或 者 分 享 
时 说 起 CSS 的 时 候 ， 嘴 里 冒 出 来 的 都 是 “这 个 元 素 高 度 99 像 素 "， 或 者 “这 
个 文字 颜色 透明 "， 对 吧 ? 这 里 提 到 的 “高 度 " 和 “颜色 ”就 是 CSS 世 界 的 属 
性 ， 感 觉 有 点 儿 像 现实 世界 里 人 的 姓氏 。 





2 但 


“ 值 ? 大 多 与 数字 挂钩 。 例 如 ， 上 面 的 99px 就 是 典型 的 值 。 在 CSS 世 
界 中 ， 值 的 分 类 非常 广泛 ， 下 面 是 一 些 常 用 的 类 型 。 


。 整数 值 ， 如 z-index:1 中 的 1， 属 于 <integer>， 同 时 也 属于 
<number>。 

。 数值 ， 如 1ine-height:1.5 中 的 1.5， 属 于 <number>。 

。 百分比 值 ， 如 padding:56% 中 的 56% ， 属 于 <percent> 。 

。 长 度 值 ， 如 99px 。 

。 颜色 值 ， 如 #999。 


此 外 ， 还 有 字符 串 值 、 位 置 值 等 类 型 。 在 CSS3 新 世界 中 ， 还 有 角 
度 值 、 频 率 值 、 时 间 值 等 类 型 ， 这 里 就 不 全 部 展示 了 。 


3. 关键 字 





顾名思义 ， 关 键 字 指 的 是 CSS 里 面 很 关键 的 单词 ， 这 里 的 单词 特 指 
英文 单词 ，abc 是 单词 吗 ? 不 是 ， 因 此 ， 如 果 CSS 中 出 现 它 ， 一 定 不 是 
关键 字 。 上 面 示例 CSS 代 码 中 的 transparent 就 是 典型 的 关键 字 ， 还 有 
第 见 的 solid 、inherit 等 都 是 关键 字 ， 其 中 inherit 也 称 作 “ 泛 关 键 
字 ”， 上 所 谓 泛 关键 字 ， 可 以 理解 为 “公交 车 关键 字 ”， 就 是 “所 有 CSS 属 性 
都 可 以 使 用 的 关键 字 ” 的 意思 。 


4. 变量 











CSS 中 目前 可 以 称 为 变量 的 比较 有 限 ，CSS3 中 的 currentColor 就 
是 变量 ， 非 常 有 用 。 不 过 ， 这 属于 《CSS 新 世界 》 的 内 容 ， 本 书 不 会 详 
细 曾 述 ， 有 兴趣 的 读者 可 以 访问 http://www.zhangxinxu.com/wordpress/? 
p=4385 或 者 扫 右 侧 的 二 维 码 ， 做 简单 的 了 解 。 








5. 长 度 单位 


CSS 中 的 单位 有 时 间 单 位 〈 如 s 、ms) ， 还 有 角度 单位 (如 deg 
、rad 等 ) ， 但 最 种 见 的 自然 还 是 长 度 单 位 〈 如 px 、em 等 ) 。 需 要 注 
意 的 是 ， 诸 如 2% 后 面 的 百 分 号 % 不 是 长 度 单位 。 再 说 一 遍 ，% 不 是 长 度 
单位 ! 因为 2% 就 是 一 个 完整 的 值 ， 就 是 一 个 整体 ， 我 想 你 一 定 认 
为 9.82 是 值 ， 没 错 ，2% 也 同样 是 值 。 





有 人 可 能 会 有 疑问 ， 我 就 认为 % 是 单位 ， 有 什么 关系 ， 页 面 还 是 长 
那样 ， 有 必要 这 么 较真 吗 ? 


问 的 很 在 理 ， 如 果 大 家 平时 没有 看 原始 文档 的 习惯 ， 没 必要 较真 ， 
知道 怎么 使 用 就 好 了 。 但 是 ， 如 果 经 常 去 MDN 或 W3C 看 一 些 CSS 技 术 
文 要 ， 搞 清楚 概念 ， 看 文档 的 时 候 就 不 容易 犯 迷 糊 ， 就 不 会 看 不 懂 具 体 
说 些 什么 ， 尤 其 都 是 英文 的 时 候 。 








可 能 有 人 会 有 疑问 ,“ 值 ”那里 提 到 的 <length> ， 貌 似 和 这 里 的 “长 
度 单 位 ?比较 暧昧 啊 ? 好 眼力 ! 没 错 ， 确 实 暧 昧 ， 但 暧昧 是 不 好 的 ， 我 
们 必须 把 它们 之 间 的 关系 搞 清 楚 。 一 句 话 : 


<number> + 长 度 单位 = <length> 


如 果 继 续 细 分 ， 长 度 单 位 又 可 以 分 为 相对 长 度 单位 和 绝对 长 度 单 
位 。 
(1) 相对 长 度 单位 。 相 对 长 度 单位 又 分 为 相对 字体 长 度 单位 和 相 
对 视 区 长 度 单位 。 
。 相对 字体 长 度 单位 ， 如 em 和 ex ， 还 有 CSS3 新 世界 的 rem 和 ch 


(字符 0 的 宽度 ) 。 
。 相对 视 区 长 度 单位 ， 如 vh 、vw 、vmin 和 vmax 。 





(2) 绝对 长 度 单位 : 最 常见 的 束 是 px ， 还 有 pt 、cm 、mm 、pc 
等 了 解 一 下 就 可 以 ， 在 我 看 来 ， 它 们 实用 性 近乎 零 ， 至 少 我 这 么 多 年 一 
次 都 没 用 过 。 
6. 功能 符 

值 以 函数 的 形式 指定 《〈 惑 是 被 括号 括 起 来 的 那 种 ) ， 主 要 用 来 表示 
颜色 (rgba 和 hsla ) 、 背 景 图 片 地 址 Curl ) 、 元 素 属 性 值 、 计 算 
(calc ) 和 过 渡 效 果 等 ， 如 rgba(86,6,6,.5) 、url('css- 
world.png') 、attr('href') 和 scale(-1) 。 


7. 属性 值 





属性 冒号 后 面 的 所 有 内 容 统一 称 为 属性 值 。 例 如 ，1px solid 
rgb(8,8,8) 就 可 以 称 为 属性 值 ， 它 是 由 "“ 值 + 关键 字 + 功 能 符 ” 构 成 的 。 
属性 值 也 可 以 由 单一 内 容 构成 。 例 如 ，z-index:1 的 1 也 是 属性 值 。 


8. 声明 





属性 名 加 上 属性 值 就 是 声明 ， 例 如 : 


color: transparent 


9. 声明 块 
声明 块 是 花 括号 ({} ) 包裹 的 一 系列 声明 ， 例 如 : 


height: 99px; 


color: transparent; 


} 





10. 规则 或 规则 集 


出 现 了 选择 器 ， 而 且 后 面 还 跟着 声明 块 ， 比 如 本 小 市 一 开始 的 那个 
例子 ， 就 是 一 个 规则 集 : 


.Vocabulary { 
height: 99px; 


color: transparent; 


} 





11. 选择 器 





选择 器 是 用 来 瞄准 目标 元 素 的 东西 ， 例 如 ， 上 面 的 .vocabulary 
就 是 一 个 选择 器 。 





。 类 选择 器 : 指 以 “ .” 这 个 点 号 开头 的 选择 器 。 很 多 元 素 可 以 应 用 同 
一 个 类 选择 嚣 。“ 类 ”， 天 生 就 是 被 公用 的 命 。 

。 ID 选择 器 :“# 打 尖 ， 权 重 相 当 高 。ID 一 般 指 癌 唯一 元 素 。 但 是 ， 
在 CSS 中 ，ID 样 式 出 现在 多 个 不 同 的 元 素 上 并 不 会 只 泻 染 第 一 个 ， 





而 是 雨露 均 沾 。 但 显然 不 推荐 这 么 做 。 

。 属性 选择 器 : 指 含 有 [ ] 的 选择 器 ， 形 如 [title]{}、[title= 
"css-world"]{}、 [title~="css-world"]{} 
、[title^="css-world"]{} 和 [title$="css-world"]{} 等 。 

。 伪 类 选择 器 : 一 般 指 前 面 有 个 英文 冒号 〈:) 的 选择 器 ， 

如 :first-child 或 :last-child 等 。 
。 伪 元 系 选 择 器 : 就 是 有 连续 两 个 冒号 的 选择 器 ， 如 : :first- 


line::first-letter 、: :before 和 ::after 。 
12. 关系 选择 器 


关系 选择 器 是 指 根据 与 其 他 元 聚 的 关系 选择 元 素 的 选择 器 ， 第 见 的 
符号 有 空格 、> 、~ ， 还 有 + 等 ， 这 些 痢 是 非常 沼 用 的 选择 右 。 





。 后 代 选 择 嚣 : 选择 所 有 合乎 规则 的 后 代 元 素 。 空 格 连接 。 

。 相 邻 后 代 选 择 露 : 仅仅 选择 合乎 规则 的 儿子 元 素 ， 孙 子 、 重 孙 元 
素 忽 略 ， 因 此 又 称 “ 子 选择 器 *。> 连接 。 适 用 于 IE7 以 上 版 本 。 

。 兄 第 选择 上 器 : 选择 当前 元 素 后 面 的 所 有 合乎 规则 的 兄弟 元 系 。~ 连 
接 。 适 用 于 了 下 7 以 上 版 本 。 

。 相 邻 兄 贡 选 择 占 : 仅仅 选择 当前 元 素 相 邻 的 那个 合乎 规则 的 兄 第 
元 素 。+ 连接 。 适 用 于 IE7 以 上 版 本 。 








13.@ 规 则 


@ 规 则 指 的 是 以 @ 字符 开始 的 一 些 规则 ， 像 @media 、@font-face 
、@page 或 者 @support ， 诸 如 此 类 。 


2.2 ”了解 CSS 世 界 中 的 “未 定义 行为 ” 


当 东 个 浏览 器 中 出 现 与 其 他 浏览 融 不 一 样 的 行为 或 样式 表现 的 时 
候 ， 我 们 总 会 习惯 把 这 种 不 一 样 的 表现 认为 是 浏览 器 的 bug。 但 在 CSS 
世界 ， 这 种 认识 是 狭隘 的 。 


在 现实 世界 中 ， 有 法 律 来 约束 我 们 的 行为 ， 如 果 越 界 ， 就 称 为 违 
法 ;同样 地 ， 在 CSS 世 界 里 ， 有 Web 标 准 来 约束 元 素 的 行为 ， 如 果 越 
界 ， 束 称 为 bug。 但 是 ， 法 律 总 是 人 制定 的 ， 世 间 万 象 是 不 可 能 面 面 俱 
到 的 ， 会 存在 法 律 空白 ;同样 地 ，Web 应 用 场景 干 变 万 化 ，Web 标 准 也 
是 不 可 能 面面俱到 的 ， 也 会 存在 规范 描述 以 外 的 场景 ， 此 时 ， 各 大 浏览 
器 三 家 只 能 根据 自己 的 理解 与 喜好 去 实现 ， 一 旦 个 性 化 就 会 出 现 差异 ， 
就 会 遇 到 “火狐 火狐 ， 你 怎么 啦 ? 平时 表现 挺 好 的 ， 今 天 怎么 被 正 带 坏 
了 ? ”的 情景 。 实 际 上 ， 此 时 遇 到 的 表现 差异 并 不 是 浏览 器 的 pug， 用 计 
算 机 领域 的 专业 术语 描述 应 该 是 “未 定义 行为 ”(undefined behavior) 。 
































下 面 我 们 来 看 一 个 “未 定义 行为 ”的 例子 。 


CSS 世 界 中 有 很 多 伪 类 ， 其 中 一 个 比较 常用 的 就 是 :active ， 在 
IE8 及 以 上 版 本 的 浏览 器 行为 表现 非常 统一 ， 支 持 非 焦点 元 素 上 ， 鼠 标 
按 下 ， 执 行 :active 伪 类 对 应 的 CSS 样 式 ， 鼠 标 抬 起 还 原 。 


通用 情况 下 ，:active 的 表现 都 是 符合 预期 的 ， 但 是 ， 当 遭遇 其 他 
一 些 处 理 的 时 候 ， 事 情 束 会 变 得 不 一 样 ， 有 具体 指 什么 处 理 呢 ? 





假设 我 们 现在 有 一 个 <a> 标签 模拟 的 按钮 ，CSS 如 下 : 


a:active { background-color: red; } 


假设 此 按钮 的 DOM 对 象 变量 名 为 button ，JavaScript 代 码 如 下 : 


button.addEventListener("mousedown", function(event) { 


// 此 处 省 略 N 行 














event .preventDefault() ; 
]) ; 





也 就 是 刀 标 按 下 的 时 候 ， 阻 止 按 钮 的 默认 行为 ， 这 样 设置 可 以 让 拖 动 效 
果 更 流畅 。 


看 似 平淡 无 奇 的 一 段 代 码 ， 最 后 却 发 生 了 意 想不到 的 情况 : Firefox 
浏览 器 的 :active 阵亡 了 ， 委 标 按 下 去 没有 UI 变化 ， 按 钮 背景 没有 变 
红 ! 其 他 所 有 浏览 器 ， 如 了 和 Chrome 浏 览 器 ，:active 正常 变 红 ， 符 
合 预 期 。 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/2/2-1.php 或 者 扫 下 面 的 
二 维 码 。 图 2-1 左 图 所 示 为 目标 效果 ， 右 图 所 示 是 Firefox 浏 览 器 中 的 效 
及。 











图 2-1 ”Firefox 浏 览 器 :active 的 作用 效果 


这 里 ，Firefox 和 IE/Chrome 浏 览 器 表现 不 一 样 ， 这 是 Firefox 浏 览 器 
的 bug 吗 ?这 可 不 是 bug， 而 是 因为 规范 上 并 没有 对 这 种 场景 的 具体 擂 
述 ， 所 以 Firefox 认 为 :active 发 生 在 mousedown 事件 之 后 ， 你 也 不 能 
说 它 什 么 ， 对 吧 ? 


像 这 种 规范 顾及 不 到 的 细 权 来 节 的 实现 ， 就 称 为 未 定义 行为 ”。 





[1] 像 : a>、< button> 这 样 的 元 素 ， 当 我 们 使 用 键盘 进行 Tab 键 切 
换 的 时 候 ， 是 可 以 被 focus 的 ， 表 现 为 虚 框 或 者 外 发 光 ， 这 类 元 素 称 
为 “焦点 元 素 ”; 非 焦点 元 素 指 没 有 设置 tabindex 属性 的 < div>、< 
span> 等 普通 元 素 。 在 IE6/IE7 浏览 器 下 ， 非 焦点 元 素 对 :active 置 若 


阅 闻 。 








第 1 章 提 过 了 ,“ 流 ”之 所 以 影响 了 整个 CSS 世 界 ， 就 是 因为 影响 了 
CSS 世 界 的 基石 HTML。 那 具体 是 如 何 影响 的 呢 ? 


HTML 和 常见 的 标签 有 <div> 、<p> 、<1li> 和 <table> 以 及 <span> 
、<img> 、 和 <em> 等。 虽然 标签 种 类 繁多 ， 但 通常 我 们 就 把 它们 分 为 
两 类 : 块 级 元 素 (block-]level element) 和 内 联 元 素 (inline element) 。 


注意 ， 如 果 按 照 W3C 的 CSS 规 范 区 分 ， 这 里 应 该 分 为 “ 块 级 元 

素 ” 和 “内 联 级 元 素 ” (inline-level element) 。 但 是 ， 在 W3C 的 HTML4 规 
范 中 ， 己 经 明确 把 HTML 元 素 分 成 了 “ 块 级 元 素 ” 和 “内 联 元 素 ”， 没 错 ， 
是 “内 联 元 素 ” 而 不 是 “内 联 级 元 素 *"。 两 个 规范 貌似 有 微小 的 冲突 。 本 书 
中 所 采用 的 是 “内 联 元 素 ” 这 种 称谓 ， 原 因 有 两 点 : 第 一 ， 这 种 称谓 更 杀 
切 、 更 自然 ， 因 为 大 家 平时 都 是 这 么 叫 的 ， 第 二 ， 使 用 “内 联 元 素 ” 这 个 
称谓 对 我 们 深入 理解 与 内 联 相 关 的 概念 并 没有 什么 影响 。 考 虑 到 本 书 的 
目的 不 是 为 CSS 规 范 做 科普 ， 而 是 以 通俗 易 懂 方式 展示 CSS 的 精彩 世 
界 ， 所 以 ， 采 用 了 更 老 一 点 的 HIML 规 范 中 的 叫 法 。 











3.1 块 级 元 素 


“ 块 级 元 素 ” 对 应 的 英文 是 block-level element， 常 见 的 块 级 元 素 
有 <div> 、<1i> 和 <table> 等 。 需 要 注意 是 ,“ 块 级 元 素 ” 和 “display 
为 block 的 元 素 ” 不 是 一 个 概念 。 例 如 ，<1i> 元 素 默 认 的 display 值 


是 list-item，<table> 元 素 默 认 的 display 值 是 table ， 但 是 它们 
均 是 “ 块 级 元 素 *”， 因 为 它们 都 符合 块 级 元 素 的 基本 特征 ， 也 就 是 一 个 水 
平流 上 只 能 单独 显示 一 个 元 素 ， 多 个 块 级 元 素 则 换行 显示 。 











正 是 由 于 “ 块 级 元 系 ” 具 有 换行 特性 ， 因 此 理论 上 它 都 可 以 配 
合 clear 属性 来 清除 浮动 带 来 的 影响 。 例 如: 








.Clear:after { 
content: ''; 
display: table; // 也 可 以 是 block， 或 者 是 1ist-item 





clear: both ; 


} 





手动 输入 http://demo.cssworld.cn/3/1-1.php 或 者 扫 右 侧 的 二 维 码 。 





从 容器 的 背景 色 高 度 变 化 我 们 可 以 看 出 清除 的 效果 ， 如 图 3-1 所 





a 


请 选择 清除 浮动 的 方法 : a 





.Clear:after { 


.Clear:after { 
content: 


< content: ''; 
clear: both; clear: Er 
} } | 


图 3-1 容器 的 背景 色 高 度 变 化 的 效果 


实际 开发 时 ， 我 们 要 么 使 用 block ， 要 么 使 用 table ， 并 不 会 使 
用 1ist-item ， 主 要 有 3 个 原因 。 


(1) 1 个 字符 的 比较 多 ， 其 他 都 是 5 个 字符 。 


(2) 会 出 现 不 需要 的 项 目 符号 ， 如 图 3-2 箭 头 所 示 。 这 其 实 并 不 是 
什么 大 问题 ， 再 加 一 行 1ist-style:none 声明 就 可 以 了 。 


(3) 下 浏览 器 不 支持 伪 元 素 的 display 值 为 list-item 。 这 是 不 
使 用 display:1ist-item 清除 浮动 的 主因 ， 茹 容 性 不 好 。 对 于 下 浏览 
器 (包括 下 11) ， 普 通 元 素 设 置 display:1ist-itemn 有 效 ， 但 
是 :before/ :after 伪 元 素 就 不 行 。 





请 选择 清除 浮动 的 方法 : 


.Clear:after { 
content: "" 


display: |1ist-item "|; 


clear: both; 


图 3-2 出现 项 目 符号 


下 面 是 提问 环节 了 。 请 问 ， 为 什么 下 浏览 器 不 支持 伪 元 素 的 
display 值 为 ]ist-item 呢 ? 


其 实 这 个 问题 的 答案 可 以 从 下 面 这 个 问题 中 找到 线索 : 请问， 为 什 
么 设置 display:1ist-item ， 元 素 会 出 现 项 目 符号 ? 





3.1.1 为 什么 list-item 元 素 会 出 现 项 目 符 号 


在 CSS 志 界 中 ， 很 多 看 似 “ 理 所 当然 ”的 现象 的 上 背后， 实际 上 可 能 有 
一 整套 的 体系 文 撑 。 挖 掘 简单 现象 背后 的 原因 ， 会 让 你 学 到 很 多 别人 很 
难 学 到 的 CSS 技 能 和 知识 。 





回 到 这 个 问题 。 此 问题 本 里 并 不 难 ， 但 是 ， 问 题 所 能 延伸 出 来 的 东 


西 束 要 吓 到 诸位 了 。 此 问题 率 扯 到 CSS 世 界 中 各 种 盒子 。 








由 于 牵扯 名 词 甚 多， 所 以 我 尽量 以 通 众 易 全 的 方式 给 大 家 解释 。 


创造 CSS 的 造物 主 原 本 的 想法 很 简单 : 我 要 创造 一 个 世界 ， 就 像 只 
有 男性 和 女性 一 样 ， 这 个 世界 只 有 块 级 盒子 (block-level box) 和 内 联 
盒子 (inline box) 。 块 级 盒子 束 负 员 结 构 ， 内 联 盒 子 就 负 贡 内 容 。 事 
非 经 过 不 知 难 ， 造 物 主 后 来 才 发 现 ， 这 世界 不 止 有 男性 和 女性 ， 还 有 特 
殊 的 性 别 ，CSS 世 界 的 盒子 也 是 这 样 。 


原本 以 为 块 级 盒子 一 套 就 够 用 了 ， 也 就 是 所 有 “ 抉 级 元 素 ” 就 只 有 一 
个 “ 抉 级 盒子 "”， 但 是 ， 半 路 杀 出 个 1ist-item ， 其 默认 要 显示 项 目 符号 
的 ， 一 个 盒子 解释 不 了 ， 怎 么 办 ? 








就 跟 我 们 写 JavaScript 组 件 遇 到 新 功能 增加 API 一 样 ， 天 神灵 机 一 
动 : 我 给 list-item 再 重新 命名 一 个 盒子 ， 就 叫 *“ 附 加 盒子 ”。 好 了 ， 这 
下 顺 了 ， 所 有 的 “ 块 级 元 素 ” 都 有 一 个 “ 主 块 级 盒子 ”，1ist-item 除 此 之 
外 还 有 一 个 “附加 盒子 ”。 


现在 大 家 知道 上 面 问题 的 答案 了 吧 ! 之 所 以 list-item 元 素 会 出 现 
项 目 符号 是 因为 生成 了 一 个 附加 的 盒子 ， 学 名 “标记 盒子 ”(Cmarker 
box) ， 专 门 用 来 放 圆 点 、 数 字 这 些 项 目 符号 。 焉 浏览 器 下 伪 元 素 不 文 
持 1ist-itenm 或 许 就 是 无 法 创建 这 个 “标记 盒子 ”导致 的 。 








但 是 ， 我 们 的 故事 还 没 结束 。 搞 定 了 list-item， 天神 本 以 为 可 以 
安安 心心 睡 个 午觉， 结果 人 页 到 了 真正 的 特殊 性 别 的 display:inline- 
block 元 素 。 


穿着 inline 的 皮 藏 着 block 的 心 ， 现 有 的 几 个 盒子 根本 没 法 解释 
啊 ， 怎 么 办 ? 


造物 主 再 次 灵机 一 动 ， 没 错 ， 你 猜 对 了 ， 双 新 增 一 个 合子， 也 残 是 
每 个 元 素 都 两 个 盒子 ， 外 在 盒子 串 和 内 在 盒子 。 外 在 盒子 负责 元 素 是 
可 以 一 行 显示 ， 还 是 只 能 换行 显示 ;内 在 盒子 负责 宽 高 、 内 容 呈 现 什 么 
的 。 但 是 呢 ， 造 物 主 义 想 了 想 ， 叫 “内 在 盒子 ?虽然 容易 理解 ， 但 是 未 锡 
有 些 俗 气 ， 难 登 大 雅之 香 ， 于 是 ， 又 想 了 一 个 更 专业 的 名 称 ， 叫 作 ”“ 容 
如 例子 ”。 




















于 是 ， 按 照 display 的 属性 值 不 同 ， 值 为 block 的 元 素 的 盒子 实际 
由 外 在 的 “ 块 级 盒子 "和 内 在 的 “ 块 级 容器 盒子 ”组 成 ， 值 为 jnline- 
block 的 元 素 则 由 外 在 的 “内 联 盒子 "和 内 在 的 “ 块 级 容器 盒子 ”组 成 ， 值 
为 inline 的 元 素 则 内 外 均 是 “内 联 盒子 ”。 


现在 ， 大 家 应 该 明白 为 何 display 属性 值 是 inline-block 的 元 素 
既 能 和 图 文 一 行 显示 ， 又 能 直接 设置 width /height 了 吧 ! 因为 有 两 个 
合子， 外 面 的 盒子 是 ijnline 级 别 ， 里 面 的 盒子 是 block 级 别 。 





实际 上 ， 如 果 遵 循 这 种 理解 ，display :block 应 该 脑 补 
成 display:block-block ，display:table 应 该 脑 补 
成 display:block-table ， 我 们 平时 的 写法 实际 上 是 一 种 简写 。 


好 了 ， 说 了 这 么 多 ， 出 个 小 题 测试 一 下 大 家 的 学 习 成 果 。 请 
问 : display:inline-table 的 盒子 是 怎样 组 成 的 ? 





3.1.2 display:inline-table 的 盒子 是 怎样 组 成 的 


这 个 问题 应 该 无 压力 : 外 面 是 “内 联 盒 子 ， 里 面 是 “table 盒 子 ”。 得 
到 的 就 是 一 个 可 以 和 文字 在 一 行 中 显示 的 表格 。 








可 以 和 文字 在 一 行 中 显示 的 表格 ? 没 错 ， 为 了 证 明 我 没 忽 悠 大 家 ， 
我 特意 做 了 个 演示 页 面 ， 演 示 页 面 中 <div> 元 素 的 相关 CSS 代 码 如 下 : 


.inline-table { 
display: inline-table; 
width: 128px; 


margin-left: 16px; 
border: 1px solid #cad5eb; 





手动 输入 http://demo.cssworld.cn/3/1-2.php 或 者 扫 下 面 的 二 维 码 。 结 
果 该 元 素 和 文字 一 行 显示 ， 且 行为 表现 如 同 真正 的 表格 元 素 〈( 子 元 素 宽 
度 等 分 ) ， 如 图 3-3 所 示 。 














able | 1398x22 





和 文字 平起平坐 的 表格 : 中 S19 二 291 





图 3-3 ”表格 元 素 和 文字 在 一 行 显示 
上 面 示意 的 CSS 代 码 表面 上 看 起 来 很 简单 ， 但 是 ， 我 也 说 过 ， 人 简单 
的 背后 往往 是 不 简单 。 这 里 CSS 中 有 个 width:128px ， 从 最 终 的 效果 来 
看 ， 宽 度 设 置 是 起 作用 了 。 如 果 我 们 使 用 display:inline-block 也 





会 是 同样 的 宽度 表现 。 下 面 问题 来 了 : 元 素 都 有 内 外 两 个 合子， 我们 平 
常设 置 的 width /height 属性 是 作用 在 哪个 盒子 上 的 ? 


3.1.3 width/height 作用 在 哪个 盒子 上 

这 个 问题 也 是 很 简单 的 ， 因 为 在 解释 内 外 盒子 的 时 候 就 已 经 提 到 过 
了 : 是 内 在 盒子 ， 也 就 是 “容器 盒子 ”。 

不 知 大 家 有 没有 进一步 深入 思考 过 : width 或 height 作用 的 具体 
节 是 什么 呢 ? 


3.2 width/height 作用 的 具体 细节 


因为 块 级 元 素 的 流体 特性 主要 体现 在 水 平方 向 上 ， 所 以 我 们 这 里 先 
着 重 讨论 width 。 


估计 很 多 人 的 第 一 次 CSS 属 性 书写 就 献 给 了 width ， 束 像 路 边 的 小 
草 ， 好 常见 、 好 平淡 、 好 简单 的 样子 。 如 果 你 有 这 样 的 想法 ， 此 书 你 惑 
买 对 了 。 





3.2.1 深 藏 不 露 的 width:auto 

我 们 应 该 都 知道 ，width 的 默认 值 是 auto。auto 因 为 是 默认 值 ， 
所 以 出 镜 率 不 高 ， 但 是 ， 它 却 是 个 深 藏 不 露 的 家 伙 ， 它 至 少 包 含 了 以 下 
4 种 不 同 的 宽度 表现 。 











(1) 充分 利用 可 用 空间 。 比 方 说 ，<div> 、<p> 这 些 元 素 的 宽度 
默认 是 100% 于 父 级 容器 的 。 这 种 充分 利用 可 用 空间 的 行为 还 有 个 专 有 





名 字 ， 叫 作 fil11-available ， 大 家 了 解 即 可 。 


(2) 收缩 与 包 庄 。 典 型 代表 就 是 浮动 、 绝 对 定位 、inline- 
block 元 素 或 table 元 素 ， 英 文 称 为 shrink-to-fit， 直 译 为 “收缩 到 合 
适 "”， 有 那么 点 儿 意 思 ， 但 不 够 形象 ， 我 一 直 把 这 种 现象 称 为 “ 包 理 
性 ”。CSS3 中 的 fit-content 指 的 就 是 这 种 宽度 表现 。 


(3) 收缩 到 最 小 。 这 个 最 容易 出 现在 table-layout 为 auto 的 表 
格 中 ， 想 必 有 经 验 的 人 一 定 见 过 图 3-4 所 示 的 这 样 一 柱 擎 天 的 盛况 吧 ! 


眼见 为 实 ， 有 兴趣 的 读者 可 以 手动 输入 http:/demo.cssworld.cn/3/2- 
1.php 或 者 扫 下 面 的 二 维 码 。 





当 父 级 relative , 且 | 当 父 级 relative , 且 
宽度 很 小 的 时 候 ， 例 | 宽度 很 小 的 时 候 ， 例 


如 如 
{position:relative; {position:relative; 
width:20px'} ， width:20px:} ， 
absolute 元 素 也 会 absolute 元 素 也 会 
当 现 一 柱 擎 天 的 情 当 现 一 柱 擎 天 的 情 
兄 ， 况 ; 


型 加 训 号 这 呈 汪 这 汪汪 


图 3-4 ”单元 格 中 的 一 柱 擎 天 效果 








当 每 一 列 空间 都 不 够 的 时 候 ， 文 字 能 断 就 断 ， 但 中 文 是 随便 断 的 ， 
英 文 单词 不 能 断 。 于 是 ， 第 一 列 被 无 情 地 每 个 字 都 断 掉 ， 形 成 一 柱 擎 
天 。 这 种 行为 在 规范 中 被 描述 为 “preferred minimum width” 或 
者 “minimum content width”。 后 来 还 有 了 一 个 更 加 好 听 的 名 字 min- 


content 。 


(4) 超出 容器 限制 。 除 非 有 明确 的 width 相关 设置 ， 否 则 上 面 3 
种 情况 尺寸 都 不 会 主动 超过 父 级 容器 宽度 的 ， 但 是 存在 一 些 特殊 情况 。 
例如 ， 内 容 很 长 的 连续 的 英文 和 数字 ， 或 者 内 联 元 素 被 设置 了 white- 
space:nowrap ， 则 表现 为 “恰似 一 江 春 水 同 东 流 ， 流 到 断崖 也 不 回 
头 ”。 


例如 ， 看 一 下 下 面 的 CSS 代 码 : 





.father { 
width: 156px; 
background-color: #cd668080; 
white-space: nowrap; 


} 

.Child { 
display: inline-block; 
background-color: #f6f3f9; 


} 





这 上 段 代 码 的 结果 如 图 3-5 所 示 。 






怡 如 一 江 春 水 向 东 流 ， 流 到 断崖 也 不 回头 


图 3-5 ”文字 超出 容器 也 不 换行 示意 








子 元 素 既 保持 了 inline-block 元 素 的 收缩 特性 ， 又 同时 让 内 容 宽 
度 最 大 ， 直 接 无 视 父 级 容器 的 宽度 限制 。 这 种 现象 后 来 有 了 专门 的 属性 
值 描述 ， 这 个 属性 值 叫 作 max-content ， 这 个 属于 CSS3 新 世界 内 容 ， 
本 书 点 到 为 止 ， 不 深究 。 





眼见 为 实 ， 大 有 兴趣 ， 可 以 手动 输入 http://demo.cssworld.cn/3/2- 
2.php 或 扫 右 侧 的 二 维 码 亲自 感受 一 下 。 








上 面 列举 的 4 点 就 是 width:auto 在 不 同 场景 下 的 宽度 表现 的 简 


在 CSS 世 界 中 ， 盒 子 分 “内 在 盒子 ?和 “外 在 盒子 >”， 显 示 也 分 “内 部 显 
示 ” 和 “外 部 显示 ”， 同 样 地 ， 尺 寸 也 分 “内 部 尺寸 "和 “外 部 尺寸 "。 其 
中 “内 部 尺寸 "英文 写作 “Intrinsic Sizing”， 表 示 尺 寸 由 内 部 元 素 决 定 ; 还 
有 一 类 叫 作 “外 部 尺寸 ">， 英 文 写作 “Extrinsic Sizing”， 宽 度 由 外 部 元 素 决 
定 。 现 在 ， 考 考 大 家 : 上 面 4 种 尺寸 表现 ， 哪 个 是 “外 部 尺寸 "? 哪个 
是 “内 部 尺寸 ”? 





这 里 就 不 卖 关 子 了。 就 第 一 个 ， 也 就 是 <div> 默认 宽度 100% 显 
示 ， 是 “外 部 尺寸 "， 其 余 全 部 是 “内 部 尺寸 "。 而 这 唯一 的 “外 部 尺寸 ”， 
是 “ 流 ” 的 精 骨 所 在 。 


1. 外 部 尺寸 与 流体 特性 
(1) 正常 流 宽度 。 当 我 们 在 一 个 容器 里 倒 入 足 量 的 水 时 ， 水 一 定 


会 均匀 铺 满 整个 容器 ， 如 图 3-6 所 示 。 


水 流 会 自动 铺 满 容器 


、 

















图 3-6 水 流 自动 铺 满 容器 示意 











在 页 面 中 随便 扔 一 个 <div> 元 系 ， 其 尺寸 表现 就 会 和 这 水 流 一 样 铺 
满 容器 。 这 就 是 plock 容 需 的 流 特 性 。 这 种 特性 ， 所 有 浏览 右 的 表现 都 


是 一 致 的 。 因 此， 我 就 实在 想 不 通 ， 为 何 那 么 多 网 站 或 同行 会 有 类 似 下 
面 的 CSS 写 法 。 例 如 ， 一 个 垂直 导航 : 


a 
display: block 


width: 1662%; 





<ay> 元 素 默认 diplay 是 inline ， 所 以 ， 设 置 display:block 使 
其 块 状 化 绝对 没有 问题 ， 但 后 面 的 width :166% 就 没有 任何 出 现 的 必要 
王 。 





我 很 多 年 前 总 结 过 一 套 “ 徐 三 无 准则 *， 即 “无 宽度 ， 无 图 片 ， 无 浮 
动 ”。 为 何 要 “无 宽度 ”? 原因 很 简单 ， 表 现 为 “外 部 尺寸 "的 块 级 元 素 一 
旦 设置 了 宽度 ， 流 动 性 就 丢失 了 。 





所 谓 流 动 性 ， 并 不 是 看 上 去 的 宽度 166% 显示 这 人 么 简单 ， 而 是 一 种 
margin/border/padding 和 content 内 容 区 域 目 动 分 配水 平 空 间 的 机 
制 |。 








我 们 来 看 一 个 简单 的 例子 ， 手 动 输入 http://demo.cssworld.cn/3/2- 
3.php 或 者 扫 右 侧 的 二 维 码 。 这 是 一 个 对 比 演示 〈 见 图 3-7)〉 ， 上 下 两 个 
导航 均 有 margin 和 padding ， 前 者 无 width 设置 ， 完 全 借助 流 特性 ， 
后 者 宽度 width:166% 。 结 果 ， 后 者 的 尺寸 超出 了 外 部 的 容器 ， 完 全 整 
不 像 “ 水 流 ” 那 样 完全 利用 容器 空间 ， 即 所 谓 的 “流动 性 丢失 ”。 


无 冤 度 ， 售 助 流动 性 





width:100% 尺寸 超出 


导航 1 





图 3-7 设 定 宽度 与 流动 性 缺失 








当然 ， 实 际 开发 的 时 候 ， 是 不 会 设置 宽度 100% 的 ， 毕 竟 有 显示 问 
题 。 此 时 ， 可 能 有 人 会 突然 灵光 一 现 ， 借 助 流动 性 来 实现 ..…. 要 是 这 样 
就 好 了 ， 然 而 其 基本 上 采取 的 策略 是 ， 发 挥 目 己 天 才 般 的 计算 能 力 ， 通 
过 “容器 宽度 -水 平 padding -水 平 margin=? ”重新 设 定 具体 的 宽度 。 








于 是 ， 最 终 的 CSS 代 人 码 如 下 : 


-nav { 
width: 246px; 
} 
.nav-a { 
display: block; 
/* 260px = 246px - 16px*2 - 16px*2 */ 


width: 266px; 
margin: 6 16px 
padding: 9px 16px; 





典型 的 “ 砌 砖头 交 拱 积木 ? 式 思 维 方式 ! 虽然 说 最 后 的 效果 是 一 样 
的 ， 但 是 ， 如 果 模 块 的 宽度 变化 了 ， 哪 怕 只 变 了 1 像素 ，width 也 需要 
重新 计算 一 和 过。 但是， 如果 借助 流动 性 无 宽度 布局 ， 那 么 殉 算 外 面容 器 
斥 十 变化， 我 们 的 导航 也 可 以 目 适 应 ， 这 就 是 充分 利用 浏览 器 原生 流 特 
性 的 好 处 。 


因此 ， 记 住 “ 无 宽度 "这 条 准则 ， 少 了 代码 ， 少 了 计算 ， 少 了 维护 ， 
何 乐 而 不 为 呢 ? 








你 应 该 还 记得 前 面 说 过 display:block 应 该 脑 补 
成 display:block-block ， 这 是 我 自己 想 出 来 的 ， 便 于 大 家 理解 ， 


CSS 世 界 其 实 并 没有 这 样 的 说 法 。 虽 有 “ 腾 想 ”成 分 在 里 面 ， 但 其 实 也 是 
有 理 可 循 的 。 本 节 详 细 讲 了 块 级 元 素 的 流体 特性 ， 这 种 特性 就 是 体现 在 
里 面 的 “容器 盒子 "上 的 。 所 以 ， 在 CSS3 最 新 的 世界 中 ，CSS 规 范 的 撰写 
者 们 使 用 了 另外 一 个 名 词 来 表示 这 个 内 在 盒子 ， 就 是 “flow”， 也 就 是 本 
书 的 核心 “ 流 ”。 因 此 ，display:b1lock 更 规范 的 脑 补 应 该 

是 display:block flow 。 注 意 中 间 是 空格 。 当 然 ， 由 于 规范 (草案) 
2015 年 10 月 才 发 布 ， 因 此 直到 2017 年 6 月 为 止 还 没有 浏览 器 支持 。 好 
了 ， 这 属于 比 CSS3 新 世界 还 要 新 的 世界 的 知识 点 ， 了 解 即 可 。 





(2) 格式 化 宽度 。 格 式 化 宽度 仅 出 现在 “绝对 定位 模型 "中 ， 也 就 
是 出 现在 position 属性 值 为 absolute 或 fixed 的 元 素 中 。 在 默认 情 
况 下 ， 绝 对 定位 元 素 的 宽度 表现 是 “* 包 囊 性 ?， 宽 度 由 内 部 尺寸 决定 ， 但 
是 ， 有 一 种 情况 其 宽度 是 由 外 部 尺寸 决定 的 ， 是 什么 情况 呢 ? 








对 于 非 蔡 换 元 素 〈 见 本 书 第 4 章 ) ， 当 left/top 或 top/bottom 对 
立方 位 的 属性 值 同时 存在 的 时 候 ， 元 素 的 宽度 表现 为 “格式 化 宽度 "”， 其 
宽度 大 小 相对 于 最 近 的 具有 定位 特性 (position 属性 值 不 是 static ) 
的 祖先 元 素 计 算 。 


例如 ， 下 面 一 段 CSS 代 码 : 


div { position: absolute; left: 26px; right: 26px; } 








假设 该 cdiv> 元 素 最 近 的 具有 和 定位 特性 的 祖先 元 素 的 宽度 是 1000 像 素 ， 
则 这 个 <div> 元 素 的 宽度 是 960 〈 即 1000-20-20) 像素 。 


此 外 ， 和 上 面 的 普通 流 一 样 , “格式 化 宽度 "具有 完全 的 流体 性 ， 也 


就 是 margin 、border 、padding 和 content 内 容 区 域 同样 会 自动 分 
配水 平和 垂直 ) 空间 。 





“格式 化 宽度 "水 很 深 ， 同 时 也 非常 实用 ， 这 里 先 简单 提 及 ， 更 多 内 
容 可 参见 本 书 第 6 章 与 position:absolute 相关 的 内 容 。 


2. 内 部 尺寸 与 流体 特性 


上 一 节 讲 的 是 “外 部 尺寸 "， 本 节 就 讲 讲 “ 内 部 尺寸 "。 所 谓 < 内 部 尺 
寸 "， 简 单 来 讲 就 是 元 素 的 尺寸 由 内 部 的 元 素 决定 ， 而 非 由 外 部 的 容器 
决定 。 如 何 快速 判断 一 个 元 素 使 用 的 是 否 为 “内 部 尺寸 " 呢 ? 很 简单 ， 候 
如 这 个 元 素 里 面 没 有 内 容 ， 宽 度 就 是 9 ， 那 就 是 应 用 的 “内 部 尺寸 "。 











据 我 所 知 ， 在 CSS 世 界 中 ,“ 内 部 尺寸 "有 下 面 3 种 表现 形式 。 
(1) 包 衷 性 。 


“ 包 庄 性 ?是 我 自己 对 “shrink-to-fit” 理 解 后 的 一 种 称谓 ， 我 个 人 觉得 
非常 形象 好 记 ， 一 直 用 了 很 多 年 。“ 包 于 性 ”也 是 CSS 志 界 中 很 重要 的 流 
布局 表现 形式 。 





中 文 就 是 博大 精深 顾名思义,，“ 包 于 性 ”， 除 了 “ 包 束 *， 还 有 “ 自 
适应 性 *”。“ 自 适应 性 ”是 区 分 后 面 两 种 尺寸 表现 很 重要 的 一 点 。 那 么 这 
个 “ 目 适 应 性 ? 指 的 是 什么 呢 ? 

















所 谓 “ 自 适应 性 ”>， 指 的 是 元 素 尺寸 由 内 部 元 素 决 定 ， 但 永远 小 
于 “包含 块 ” 容 器 的 尺寸 (除非 容器 尺寸 小 于 元 素 的 “首选 最 小 宽度 ”) 。 
换 句 话说 就 是 ,“ 包 庄 性 ?元素 冥 冥 中 有 个 max-width:166% 时 着 的 感觉 

















注意 ， 此 说 法 只 是 便于 大 家 理解 ， 实 际 上 是 有 明显 区 别 的 ) 。 


因此 ， 对 于 一 个 元 素 ， 如 果 其 display 属性 值 是 inline-block ， 
那么 即使 其 里 面 内 容 再 多 ， 只 要 是 正常 文本 ， 宽 度 也 不 会 超过 容器 。 于 
是 ， 图 文 混 排 的 时 候 ， 我 们 只 要 关心 内 容 ， 除 非 * 首 选 最 小 宽度 ” 比 容器 
宽度 还 要 大 ， 否 则 我 们 完全 不 需要 担心 某 个 元 素 内 容 太 多 而 破坏 了 布 





几 事 发 生 必 有 缘由 。CSS 世 界 的 造物 主 为 何 要 设计 “ 包 于 性 ”这 个 东 
西 呢 ? 是 为 谁 设计 的 呢 ? 








反问 是 探 完 知 识 的 很 好 的 习惯 和 方式 。 要 回答 上 面 的 问题 ， 我 们 只 
要 请 一 个 辟 宾 出 来 ， 管 案 束 基本 差不多 了 。 下 面 我 们 就 请 出 重量 级 嘉宾 
一 一 着 名 的 “按钮 "元 素 。 没 错 ， 就 古 默 认 长 得 比较 丑 ， 样 式 定 义 兼 容 性 
又 不 好 的 按钮 元 素 。 














按钮 通常 以 如 下 两 种 形式 出 现在 页 面 代码 中 : 


<button> 按 钮 </button> 


<input type="button"” value=" 按 钮 "> 








按钮 就 是 CSS 世 界 中 极 具 代表 性 的 jnline-block 元 素 ， 可 谓 展 
示 “ 包 里 性 ”最 好 的 例子 ， 具 体 表 现 为 ， 按钮 文字 越 多 宽度 越 宽 〈 内 部 尺 
寸 特性 ) ， 但 如 果 文 字 足 够 多 ， 则 会 在 容 喜 的 宽度 处 自动 换行 〈 目 适应 
特性 ) 。 











按钮 会 目 动 换行 ? 没 错 ， 你 之 所 以 没 印象 ， 可 能 是 因为 : 





。 实际 项 目 中 ， 按 钮 上 的 文字 个 数 比 较 有 限 ， 没 机 会 换行 ; 
e。 “buttony> 标签 按钮 才 会 自动 换行 ，<input> 标签 按钮 ， 默 认 
white-space:pre， 是 不 会 换行 的 ， 需 要 将 pre 值 重 置 为 默认 的 


normal 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-4.php 或 者 扫 下 面 的 
二 维 码 。 上 面 的 示例 页 面 的 效果 如 图 3-8 所 示 。 


























文字 再 多 一 点 











按钮 文字 越 多 宽度 越 宽 ( 包 圳 ,内 部 及 可 
特性 )， 但 不 会 起 过 容 比 完 度 ( 自 适 应 
性 ) 








图 3-8 IE11 浏 览 器 IE8 模 式 下 按钮 换行 效果 








按钮 最 大 宽度 就 是 容器 的 240 像 系 ，1 像 素 不 多 1 像素 不 少 ， 顿 时 有 
了 一 种 内 外 兼 修 的 感觉。 


“ 包 庄 性 ?对 实际 开发 有 什么 作用 呢 ? 








请 看 这 个 需求 : 页 面 茶 个 模块 的 文字 内 容 是 动态 的 ， 可 能 是 几 个 
字 ， 也 可 能 是 一 句 话 。 然 后 ， 和 希望 文字 少 的 时 候 拓 中 显示 ， 文 字 超 过 一 
行 的 时 候 拓 左 显 示 。 该 如何 实现 ? 


核心 CSS 代 码 如 下 : 


.box { 
text-align: center; 


} 

.Content { 
display: inline-block; 
text-align: left; 

} 





这 样 ， 文 字 少 的 时 候 ， 就 会 如 图 3-9 所 示 。 文 字 多 的 时 候 ， 如 图 3-10 


所 示 。 


图 3-9 ”文字 少时 的 显示 效果 








文字 内 容 - 新 增 文字 -新 增 文字 -新 增 


文字 -新 增 文字 





图 3-10 ”文字 多 时 的 显示 效果 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-5.php 或 者 扫 右 侧 的 
二 维 码 ， 进 入 页 面 点 击 “ 更 多 文字 ”按钮 体验 。 











除了 inline-block 元 素 ， 浮 动 元 素 以 及 绝对 定位 元 素 都 具有 包 庄 
性 ， 均 有 类 似 的 智能 宽度 行为 。 


(2) 首选 最 小 宽度 。 





所 谓 “ 首 选 最 小 宽度 ”， 指 的 是 元 素 最 适合 的 最 小 宽度 。 我 们 接着 上 
面 的 例子 ， 在 上 面 例子 中 ， 外 部 容器 的 宽度 是 240 像 素 ， 假 设 宽度 是 
0， 请 问 里 面 的 jnline-block 元 素 的 宽度 是 多 少 ? 




















是 0 吗 ? 不 是 。 在 CSS 世 界 中 ， 图 片 和 文字 的 权重 要 远大 于 布局 ， 
因此 ，CSS 的 设计 者 显然 是 不 会 让 图 文 在 width:auto 时 宽度 变 成 0 的 ， 
此 时 所 表现 的 宽度 驶 是 “首选 最 小 宽度 ”。 上 有 具体 表 现 规则 如 下 。 














。 东亚 文字 《如 中 文 ) 最 小 蜗 度 为 每 个 汉字 的 宽度 ， 如 图 3-11 所 示 的 
4 











图 3-11 ”中 文 汉字 与 最 小 宽度 效果 






92.78x49 
EE | 

display:inline- 

block 


图 3-12 ”连续 字符 换行 点 示意 





。 西方 文字 最 小 宽度 由 特定 的 连续 的 英文 字符 单元 决定 。 并 不 是 所 有 
的 英文 字符 都 会 组 成 连续 单元 ， 一 般 会 终止 于 空格 〈 普 通 空格 ) 、 
短 横 线 、 问 号 以 及 其 他 非 英文 字符 等 。 例 如 ，“display:inline- 
block ”这 几 个 字符 以 连接 符 “- ”作为 分 陋 符 ， 形 成 
了 “display:inline ”和 “block ”两 个 连续 单元 ， 由 于 连接 符 “- 
”分隔 位 置 在 字符 后 面 ， 因 此 ， 最 后 的 宽度 就 是 “<display:inline- 
”的 宽度 ， 如 图 3-12 所 示 。 





如 果 想 让 英文 字符 和 中 文 一 样 ， 每 一 个 字符 都 用 最 小 宽度 单元 ， 可 
以 试 试 使 用 CSS 中 的 word-break:break-all。 








。 类 似 图 片 这 样 的 丛 换 元 素 的 最 小 宽度 天 是 该 元 素 内 容 本 里 的 宽度 。 





“首选 最 小 宽度 "对 我 们 实际 开 及 有 什么 作用 呢 ? 


可 以 让 我 们 遇 到 类 似 现象 的 时 候 知 道 原 因 是 什么 ， 方 便 迅 速 对 症 下 
药 ， 其 他 就 没什么 用 了 。 





有 点 失望 ? 那 好 ， 我 束 举 个 利用 “首选 最 小 客 度 ”构建 图 形 的 例子 
吧 。 请 问 ， 如 何 使 用 一 层 HTML 标 签 分 别 实现 图 3-13 所 示 
的 “四 ”和 “ 凸 ” 效 果 注意 要 兼容 IE8) ? 








由 于 要 兼容 IE8，CSS 新 世界 中 图 形 构建 利 融 的 盒 阴 影 和 背景 渐变 
全 都 没有 用 武之 地 ， 怎 么 办 呢 ? 我 们 可 以 利用 “ 衣 选 最 小 览 度 ” 的 行为 特 
点 把 需要 的 图 形 勾勒 出 来 。 核 心 CSS 代 码 如 下 《以 “ 止 ?效果 示意 ) : 


.ao { 
display: inline-block; 
width: 8; 

} 


.ao:before { 


content: "love 你 love"; 
outline: 2px solid #cd66060; 
color: #fff; 


} 





还 没 看 明白 ? 那 我 把 文字 颜色 放出 来 〈 见 图 3-14) ， 大 家 应 该 束 知 


道 实 现 原理 了 。 


图 3-13 “需要 实现 的 效果 图 


下 中 


图 3-14 ”图 形 由 文字 区 域 勾勒 而 成 
































利用 连续 英文 单词 不 换行 的 特性 ， 我 们 就 可 以 控制 什么 地 方 “ 凹 ”， 
什么 地 方 “ 吓 ?图 ! 


想 看 在 线 演示 ， 请 手动 输入 http://demo.cssworld.cn/3/2-6.php 或 者 扫 
右 侧 的 二 维 码 。 





(3) 最 大 宽度 。 





最 大 宽度 就 是 元 素 可 以 有 的 最 大 宽度 。 我 自己 是 这 么 理解 的 ,，“ 最 
宽度 ”实际 等 同 于 “ 包 囊 性 ”元 素 设 置 white-space:nowrap 声明 后 的 











宽度 。 如 果 内 部 没有 块 级 元 素 或 者 块 级 元 系 没 有 设 定 宽度 值 ， 则 “最 大 
宽度 ”实际 上 是 最 大 的 连续 内 联 盒子 的 宽度 。 


什么 是 连续 内 联 盒子 ?“ 内 联 盒子 ”的 内 容 会 在 3.4 节 深入 讲解 ， 这 里 
你 就 简单 地 将 其 理解 为 display 为 jnline 、inline-block、 inline-table 
等 元 素 。“ 连 续 内 联 盒子 ” 指 的 全 部 都 是 内 联 级 别 的 一 个 或 一 堆 元 素 ， 中 
间 没 有 任何 的 换行 标签 <cpr> 或 其 他 块 级 元 素 。 


一 图 胜 千 言 ， 图 3-15 所 示 是 一 段 很 平常 的 HTML 片段 的 “连续 内 联合 
子 ” 信 息 标 注 图 。 其 中 ， 有 3 处 连续 内 联 盒子 ， 分 别 是 : 


<br> 前 面 的 4 个 内 联 盒 子 组 合 ; 
<br> 后 面 “ 我 是 下 一 行 ?字样 所 在 的 匿名 内 联 盒子 ; 
最 后 块 状 <p> 标签 内 的 内 联 盒子 ， 也 就 是 一 段 文本 。 











， 内 联 ” 文 字 对 应 的 标注 相 一 致 ， 此 时 “最 大 宽度 ”就 是 这 3 
续 内 联 盒子 的 宽度 的 最 大 值 。 








如 果 把 标注 图 的 代码 在 浏览 器 中 运行 一 下 ， 则 在 最 大 宽度 模式 下 ， 
效果 如 图 3-16 所 示 。 可 以 发 现 最 后 的 宽度 就 是 第 一 个 “连续 内 联 盒子 ”的 
宽度 。 

内 联 一 
我 是 文本 ” 
由 联 一 一 > “span> 我 在 ijnline 标 签 内 </span 
内 联 ~ 一 之 “button> 我 下 按钮 </button> 
内 联 —— > ‘img src= Shuai.png” alt= 我 是 图 三 
本 
Do 一 一 “我 后 一行” [一 玉 内 联 
> 一 :pp 我 是 一 段 描述 </p 机 
块 a /div 


图 3-15 “连续 内 联 盒子 ”信息 标注 图 





图 3-16 最 大 宽度 模式 下 的 效果 


“最 大 宽度 ”对 我 们 实际 开发 有 什么 作用 呢 ? 


根据 我 这 么 多 年 的 经 验 ， 大 部 分 需要 使 用 “最 大 宽度 ”的 场景 都 可 以 
通过 设置 一 个 “很 大 宽度 ”来 实现 。 注 意 ， 这 里 的 “很 大 宽度 ”和 “最 大 宽 
度 ” 是 有 本 质 区 别 的 。 比 方 说 ， 有 5 张 图 片 ， 每 张 图 片 宽度 200 像 素 ， 假 
设 图 片 元 素 紧 密 排列 ， 则 “最 大 宽度 ”就 是 1000 像 素 。 但 是 ， 实 际 开 发 的 
时 候 ， 我 们 懒得 计算 ， 可 能 直接 设置 容器 width:2666px ， 这 里 2666px 
就 是 “很 大 宽度 ”， 宽 度 足 够 大 ， 作 用 是 保证 图 片 不 会 因为 容器 宽度 不 足 
而 不 在 一 行内 显示 。 两 者 都 能 实现 几 张 图 片 左 右 滑 来 滑 去 的 效果 。 
































那 有 没有 场景 只 能 是 “最 大 宽度 ”而 不 是 “很 大 宽度 ” 呢 ? 有 ! 不 知 大 
家 有 没有 听 过 iScroll， 它 可 以 实现 非常 平滑 的 深 动 效果 ， 在 前 端 界 颇 有 
人 


一 般 来 讲 ， 实 现 自 定义 深 动 有 两 种 原理 : 一 种 借助 原生 的 滚 
动 ，scrollLeft /scrollTop 值 变化 ， 它 的 优点 是 简单 ， 不 足 是 效果 
乐 板 ; 另 一 种 是 根据 内 部 元 素 的 尺寸 和 容器 的 关系 ， 通 过 修改 内 部 元 素 
的 位 置 实现 滚动 效果 ， 优 点 是 效果 可 以 很 绽放 。iScrol 就 是 使 用 的 后 
者 ， 因 此 ， 如 果 我 们 希望 使 用 iScroll 模 拟 水 平 滚动 ， 只 能 是 使 用 “最 大 宽 





度 "， 这 样 ， 滚 动 到 撒 的 时 候 才 是 真 的 到 确 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/2-7.php 或 者 扫 下 面 的 
二 维 码 。 保 证 在 一 行 显示 ， 同 时 不 浪 绩 一 点 空白 ， 如 图 3-17 所 示 。 








海 动 到 菜瓜 


图 3-17 ”最 大 宽度 与 精确 滚动 示意 





3.2.2 ”width 值 作 用 的 细节 


细心 的 读者 有 没有 发 现 ， 前 面 那 么 多 页 ， 其 实 就 讲 了 一 个 点 
一 width:auto ， 说 “ 深 产 不 露 * 不 是 忽悠 你 们 吧 ? 下面， 转换 思维 ， 
我 们 来 看 一 下 width 属性 使 用 具体 数值 会 有 怎样 的 表现 。 








比方 说 ， 对 于 一 个 <div> 元 素 ， 我 们 设 定 其 宽度 为 166 px， 如 下 : 


div { width: 166px; } 


请 问 ，166px 的 宽度 是 如 何 作 用 到 这 个 <div> 元 素 上 的 ? 





要 回答 这 个 问题 ， 就 需要 了 解 CSS 世 界 中 与 尺寸 相关 的 一 个 重要 概 


“ 盒 尺 寸 ”(box dimension ) 。 





人 
人 


前 文 多 次 强调 了 ，width 是 作用 在 “内 在 盒子 "上 的 ， 乍 一 看 是 一 个 
普通 的 盒子 ， 实 际 上 ， 这 个 “内 在 盒子 ? 古 由 很 多 部 分 构成 的 。 这 个 盒子 
的 构成 和 地 球 结构 的 构成 惊人 地 类 似 ， 可 参考 图 3-18 所 示 的 这 张 我 制作 
的 示意 图 (图 中 虚线 、 实 线 是 为 了 区 分 不 同 结构 ， 本 里 并 没有 意义 )〉。 











CSS 盒 尺寸 区 域 地 球 构造 区 域 


margin ( 透明 ) 
border 


padding 


| 1 
| 1 
| 1 
| 1 
| 1 
| 1 
| 1 
l 1 
| 1 
1 

1 content - 
| 1 
| 1 
l 1 
| I 
| 1 
| 1 
| 1 
| 1 
| 1 
l 1 





图 3-18 ” 盒 尺 寸 盒 子 结构 和 地 球 结构 对 比 图 





仔细 对 比 会 发 现 ， 两 者 不 仅 结 构 类 似 ， 对 应 结构 的 视觉 表现 和 含义 
也 类 似 。 比 方 说 ，CSS 的 margin 区 域 和 地 球 的 大 气 层 区 域 都 是 透明 
的 ， 又 比方 说 content 之 于 CSS， 正 如 地 核 之 于 地 球 ， 都 是 属于 核心 ， 
因为 CSS 世 界 的 诞生 就 是 为 图 文 信息 展示 服务 的 ， 因 此 ， 内 容 一 定 是 最 
重要 的 核心 。 然 后 在 这 个 核心 的 外 面包 里 了 padding 、border 和 


margin 。 


CSS 世 界 什么 最 多 ? 盒子 ! 比方 前 面 介绍 过 的 块 状 例子、 内 联 盒子 
以 及 外 在 盒子 和 内 在 盒子 ， 以 及 这 里 即将 出 现 的 4 个 盒子 ， 以 及 3.4 节 介 
绍 的 一 堆 盒 子 。 如 果 这 些 盒子 纯粹 是 概念 ， 没 什么 实际 作用 ， 我 惑 不 讲 
或 直接 一 步 珊 过 ， 但 是 ， 这 里 的 这 4 个 盒子 不 仅仅 是 概念 ， 还 真 的 有 付 
诸 实践 的 关键 字 ， 上 所 以 还 是 要 好 好 说 一 说 。 


我 们 的 这 个 “内 在 盒子 ?又 被 分 成 了 4 个 合子， 分别 是 content box、 
padding box、border box 和 margin box。 


原本 这 几 个 盒子 只 存在 于 规范 中 ， 我 们 写 代 码 的 知 不 知道 无 所 谓 
的 ， 都 能 写 出 很 棒 的 CSS 代 码 ， 这 就 和 玩 游戏 没 必要 知道 游戏 怎么 制作 
的 道理 一 样 。 但 是 后 来 ， 这 几 个 盒子 在 CSS 语 言 层 有 名 字 了 ， 一 下 子 变 
成 有 号 份 的 人 了 ， 事 情 就 变 了 了， 如 有 果 对 这 些 盒子 不 了 解 ， 有 些 CSS 属 性 
就 不 好 理解 ， 也 不 容易 记 住 。 





那么 都 给 它们 起 了 些 什 么 名 字 呢 ? content box 写作 content-box 
，padding box 写作 padding-box ，border box 写 作 border-box ， 
margin box 写 作 .… 突然 发 现 ，margin box 居 然 没 有 名 字 ! 为 何 唯 独 








margin box 并 没有 对 应 的 CSS 关 键 字 名 称 呢 ? 因为 目前 没有 任何 场景 


需要 用 到 margin box。 


“margin 的 背景 永远 是 透明 的 ”， 因 此 不 可 能 作为 backgound-clip 
或 background-origin 属性 值 出 现 。margin 一 旦 设 定 具 体 宽度 和 高 度 
值 ， 其 本 身 的 尺寸 是 不 会 因 margin 值 变 化 而 变化 的 ， 因 此 作为 box- 
sizing 的 属性 值 存 在 也 就 没有 了 意义 (这 会 在 后 面 深入 曾 述 ) 。 既 然 
无 用 武之 地 ， 上 自然 就 被 抛弃 了 。 











现在 回 到 一 开始 的 问题 ，width:168px 是 如 何 作 用 到 <div> 元 素 上 
的 ? 


在 CSS2.1 的 规范 中 ， 有 一 段 非常 露骨 的 描述 : content box 环 经 
着 width 和 height 给 定 的 矩形 。 


说 得 这 么 直 白 ， 我 已 经 没什么 其 他 可 说 的 了 。 明 摆 
着 ，width:166px 作用 在 了 content box 上 ， 由 于 <div> 元 素 默 认 的 
padding 、border 和 margin 都 是 8 ， 因 此 ， 该 <div> 所 呈现 的 宽度 就 
是 100 像 素 。 


那么 按照 这 种 说 法 ， 如 果 我 们 在 水 平方 向 给 定 padding 和 border 
大 小 ， 则 元 素 的 尺寸 就 不 是 100 像 素 了 ? 我 们 看 一 个 简单 的 例子 : 


div { width: 166px; padding: 26px; border: 26px solid; } 





手动 输入 http://demo.cssworld.cn/3/2-8.php 或 者 扫 下 面 的 二 维 码 。 结 
末 变 成 了 180 像 素 宽 ， 如 图 3-19 所 示 。 


此 时 元 素 的 
offsetWidth 
是 : 180 





图 3-19 ”默认 盒 尺 寸 下 的 offsetWidth 








为 什么 会 变 宽 呢 ? 其 实 很 好 理解 ， 因 为 宽度 是 作用 在 content box 上 
的 ， 而 外 面 围绕 的 padding box 和 border box 又 不 是 摆设 ， 自 然 实 际 尺 寸 
要 比 设 定 的 大 。 这 就 好 比 某 超 模 的 腰围 61 cm， 庄 了 件 东北 大 棉 只 ， 自 
然 此 时 的 腰围 要 远大 于 61 cm。 如 图 3-20 所 示 ， 中 间 有 点 蓝 的 就 
是 content 区 域 ， 宽 度 100 像 素 ， 再 加 上 padding 和 border 左右 各 20 
像素 ， 最 终 客 度 束 是 180 像 系 啦 ! 








图 3-20 180 像素 宽度 的 盒 模 型 


如 有 果 单 看 定义 和 表现 ， 似 乎 一 切 都 合情合理 ， 但 实际 上 ， 多 年 的 实 
践 告 诉 我 ， 有 时 候 ， 这 种 宽度 设 定 和 表现 并 不 合理 。 我 总 结 为 以 下 两 
所 。 











(1) 流动 性 丢失 。 


对 于 块 状元 素 ， 如 果 width:auto ， 则 元 素 会 如 水 流 般 充满 整个 容 
器 ， 而 一 旦 设 定 了 width 具体 数值 ， 则 元 素 的 流动 性 就 会 被 阻 断 ， 因 为 
元 素 给 定 宽 度 就 像 河流 中 间 竖 了 两 个 大 闸 一 样 ， 就 没有 了 流动 性 。 尤 其 
宽度 作用 在 content box 上 ， 更 是 内 外 流动 性 全 无 ， 如 图 3-21 所 示 。 


这 世界 上 任何 事物 ， 一 旦 限 死 了 ， 束 形 失 了 灵活 性 ， 其 发展 潜力 及 
作用 范围 融会 大 大 受 限 。 


长 江 为 何 生 机 过 勃 数 干 年 ， 就 是 因为 滔滔 江水 ， 奔 流 不 县 。CSS 的 
流动 性 也 是 其 生机 壬 勃 之 本 ， 如 果 直 接 宽度 设 死 ， 流 动 性 丢失 ， 在 我 看 
来 ， 就 是 江河 变 死水 ， 手 机 变 板 砖 。 这 就 是 我 提出 “无 宽度 准则 ”的 原因 
一 一 布局 会 更 灵活 ， 容 错 性 会 更 强 。 





width:auto: width:100px.; 


Co (oo 


图 3-21 流动 性 缺失 示意 图 








鉴于 “流动 性 丢失 ”在 3.2.1 节 其 实 已 经 提 过 ， 还 有 实例 ， 这 里 就 不 再 
过 多 展开 。 


(2) 与 现实 世界 表现 不 一 致 的 困扰 。 


包含 padding 或 border 会 让 元 素 宽度 变 大 的 这 种 CSS 表 现 往往 会 
让 CSS 使 用 者 困惑 : 我 设置 宽度 为 100 像 素 ， 其 实 是 希望 整个 最 终 的 宽 
度 是 100 像 素 ， 这 样 才 符 合 现 实 理解 嘛 。 比 方 说 ， 我 买 个 140m? 的 房 
子 ， 肯 定 是 连 墙 体面 积 在 内 的 啊 ， 实 际 使 用 面积 比 140m? 小 才 是 现实 ， 
你 说 现在 最 终 面 积 比 140m? 还 大 ， 这 种 事情 显然 是 不 科学 不 合理 的 。 











或 许 是 因为 CSS 2.1 是 面 癌 内 容 〈 图 文 信息 ) 设计 的 ， 所 以 ，width 
设计 成 了 直接 作用 在 content box 上 。 


这 对 一 些 CSS 新 手 的 布局 造成 了 一 定 的 障碍 ， 因 为 这 些 CSS 从 业者 
眼中 的 CSS 结 构 是 砖 块 ， 而 不 是 水 流 。 因 此 ， 布 局 讲求 尺寸 精确 计算 。 
这 就 导致 在 一 些 CSS 属 性 值 发 生变 化 的 时 候 (如 padding 值 变 大 ， 元 素 
尺寸 也 变 大 ) ， 空 间 不 足 ， 出 现 页 面 布局 错位 的 问题 。 





那 有 没有 什么 办 法 能 避免 这 种 错位 问题 的 出 现 呢 ? 方法 之 一 就 是 采 
用 书写 方式 约束 ， 如 使 用 “宽度 分 离 原 则 ”。 





3.2.3 CSS 流体 布局 下 的 宽度 分 离 原 则 


所 谓 “ 宽 度 分 离 原则 ， 就 是 CSS 中 的 width 属性 不 与 影响 宽度 的 
padding/border 〈 有 时 候 包 括 margin ) 属性 共存 ， 也 就 是 不 能 出 现 
以 下 的 组 合 : 


.box { width: 166px; border: 1px solid; } 


或 者 


.box { width: 166px;j padding: 26px; } 


有 人 可 能 会 问 : 不 这 么 写 ， 该 怎么 写 呢 ? 很 简单 ， 分 离 ，width 独 
立 占用 一 层 标 签 ， 而 padding 、border、 margin 利 用 流动 性 在 内 部 目 适 
应 呈现 。 





.father { 
width: 186pX; 
} 


.Son { 


margin: 6 28px; 
padding: 28px; 
border: 1px solid; 





现在 关键 问题 来 了 : 为 何 要 宽度 分 离 ? 
1. 为 何 要 宽度 分 离 





在 前 端 领域 ， 一 提 到 分 离 ， 作 用 一 定 是 便于 维护 。 比 方 说 ， 样 式 和 
分 离 、 前 后 端 分 离 或 者 这 里 的 “宽度 分 离 ”。 





人 当 ss nm 
候 ， 这 个 事情 最 终 的 结果 束 会 变数 很 大 而 不 可 预期 。 宽 度 在 这 里 也 是 
似 ， 0 盒子 都 能 影响 宽度 ， 下 大 用 
就 很 容易 发 生变 化 而 导致 意 想 不 到 的 布局 发 生 。 例 如 ， 下 面 这 个 简单 的 
CSS: 











.box { 
width: 166pX; 


border: 1px solid; 
} 





此 时 宽度 是 102 像 素 。 然 后 ， 设 计 师 希望 元 素 边 框 内 有 20 像 素 的 留 白 ， 
这 时 候 ， 我 们 会 增加 padding 设置 : 


.box { 
width: 166pX; 
padding: 28px; 
border: 1px solid; 
} 








结果 此 时 宽度 变 成 了 142 像 素 ， 大 了 40 像 素 ， 跟 原来 宽度 差异 明显 ， 显 
i A he 
去 40 像 素 的 padding 大 小 才 行 : 














.box { 
width: 66pxX; // 通过 计算 ， 减 去 46 像 素 
padding: 28px; 
border: 1px solid; 





} 











但 是 ， 如 果 我 们 使 用 了 宽度 分 离 ， 事 情 束 会 轻松 很 多 : 


.father { 
width: 162pX; 
} 


.Son { 
border: 1px solid; 


} 





幅 套 一 层 标 签 ， 父 元 素 定 宽 ， 子 元 素 因 为 width 使 用 的 是 默认 
值 auto ， 所 以 会 如 水 流 般 自动 填 满 父 级 容器 。 因 此 ， 子 元 素 的 content 
box 宽 度 就 是 100 像 素 ， 和 上 面 直接 设置 width 为 100 像 素 表现 一 样 。 


然后 ， 同 样 的 故事 ， 设 计 师 希望 元 素 边 框 内 有 20 像 素 的 留 白 ， 这 时 
候 ， 我 们 会 增加 padding 设置 : 


.father { 
width: 162pX; 
} 


.Son { 


border: 1px solid; 
padding: 28px; 








然后 ..….... 就 没有 然后 了 ， 宽 度 还 是 102 像 素 ， 子 元 素 的 content box 自 
动 变 成 了 60 像 素 ， 和 上 面 反 例 的 表现 一 样 。 没 错 ， 自 动 变 化 了 ， 就 是 这 


么 智能 ! 


虽然 表现 一 样 ， 但 是 写 代 码 的 人 的 体验 却 大 不 一 样 : width 、 
padding、 border 混 用 的 时 候 ， 任 何 修改 我 们 都 需要 实时 去 计算 现 
在 width 应 该 设置 多 大 才能 和 之 前 的 占用 的 宽度 一 样 ， 而 后 面 width 分 





离 的 实现 ， 我 们 没有 任何 计算 ， 要 padding 留 白 ， 加 一 下 就 好 ， 要 修改 
边框 宽度 ， 改 一 下 就 好 ， 浏 览 器 会 自动 计算 ， 完 全 不 用 担心 尺寸 的 变 
化 。 





也 惑 是 说 ， 使 用 “宽度 分 离 ” 后 ， 咱 们 不 需要 伐 脑 子 去 计算 了 ， 而 且 
页 面 结构 反 而 更 稳固 。 这 么 好 的 事情 ， 完 全 没有 理由 拒绝 啊 ! 


2. 可 能 的 挑战 





有 人 可 能 会 提出 挑战 ， 你 这 “宽度 分 离 ” 多 使 用 了 一 层 标签 啊 ， 这 
HTML 成 本 也 是 成 本 啊 ! 








没 错 ， 问 题 本 身 是 对 的 。HTML 的 成 本 也 是 成 本 ， 过 深 的 垦 套 是 会 
增加 页 面 泻 染 和 维护 成 本 的 。 但 是 ， 我 这 里 要 抛 出 一 句 话 ， 实 际 上 ， 如 
果 不 考虑 蔡 换 元 素 ， 这 世界 上 绝 大 多 数 的 网 页 ， 只 需要 一 个 width 设 定 
就 可 以 了 ， 没 错 ， 只 需要 一 个 width ， 就 是 最 外 层 限制 网 页 主体 内 容 宽 
度 的 那个 width ， 而 里 面 所 有 元 又 都 没有 理由 再 出 现 width 设置 。 所 
以 ，“ 宽 度 分 离 ” 虽 然 多 了 一 层 标签 ， 但 最 终 也 就 多 了 一 层 标签 而 已 ， 这 
个 成 本 跟 收益 比 起 来 简直 就 是 毛毛 雨 。 

















但 是 ， 话 又 说 回来 ,，“ 无 宽度 ”网 页 布局 是 需要 很 深 的 CSS 积 系 才 能 
等 驶 自如 的 ， 很 多 同行 没 好 好 品 鉴 本 书 的 内 容 ， 要 是 让 他 们 完全 遵 
人 循 “宽度 分 离 ” 来 实现 ， 怕 是 HTML 会 变 得 很 虽 唆 。 











那 有 没有 什么 既 无 须 计 算 ， 又 无 须 额 外 内 套 标签 的 实现 呢 ? 有 ， 那 
就 是 可 以 改变 width 作用 细节 的 box-sizing 属性 。 


3.2.4 改变 width/height 作用 细节 的 box-sizing 


box-sizing 虽然 是 CSS3 属 性 ， 但 是 ， 让 人 受 宠 辕 惊 的 是 IE8 浏 览 
器 也 是 支持 它 的 ， 不 过 需要 加 -ms- 私有 前 级 ， 但 IE9 浏 览 器 开始 就 不 需 
要 私有 前 级 了 。 


本 书 内 容 是 针对 IE8 及 以 上 版 本 浏览 器 的 ， 因 此 ，box-sizing 也 加 
入 了 CSS 世 界 魔法 师 的 队伍 。 


1. box-sizing 的 作用 


box-sizing 顾名思义 惑 是 “使 尺寸 "。 稍 等 ， 前 文 好 像 也 出 现 了 一 
个 “使 尺 寸 ”(box dimension) ， 喷 ? 两 者 是 一 样 的 吗 ? 我 个 人 觉得 是 一 
样 的 ， 只 是 dimension 这 个 词 太 过 于 官方 了 ， 用 在 规范 中 很 合适 ， 但 是 ， 
要 是 作为 CSS 必 性， 拼写 就 不 那么 容易 了 ， 所 以 就 使 用 了 更 口语 化 的 


box-Ssizing 。 


虽然 box-sizing 被 直译 为 “ 盒 尺 寸 "， 实 际 上 ， 其 更 准确 的 叫 法 应 
该 是 “ 盒 尺 寸 的 作用 细节 ”， 或 者 说 得 更 通俗 一 点 ， 叫 “width 作用 的 细 
节 ”， 也 就 是 说 ，box-sizing 属性 的 作用 是 改变 width 的 作用 细节 。 


那 它 改变 了 什么 细节 了 呢 ? 一 句 话 ， 改 变 了 width 作用 的 盒子 。 还 记 
不 记得 “内 在 盒子 ”的 4 个 盒子 ? 它们 分 别 是 content box、padding box、 
border box 和 margin box。 默 认 情 况 下 ，width 是 作用 在 content box 上 
的 ，box-sizing 的 作用 就 是 可 以 把 width 作用 的 盒子 变 成 其 他 几 个 ， 
因此 ， 理 论 上 ，box-sizing 可 以 有 下 面 这 些 写法 : 





.box1 { box-sizing: content-box; } 
.box2 { box-sizing: padding-box; } 
.box3 { box-sizing: border-box; } 
.box4 { box-sizing: margin-box; } 





理论 美好 ， 现 实 残酷 。 实 际 上 ， 支 持 情况 如 下 : 





.box1 { box-sizing: content-box; } /* 默认 值 */ 
.box2 { box-sizing: padding-box; } /* Firefox 曾 经 支持 */ 


.box3 { box-sizing: border-box; } /* 全 线 文 持 */ 
.box4 { box-sizing: margin-box; } /* 从 未 支持 过 */ 





所 以 ， 我 只 能 拿 border-box 属性 值 做 对 比 ， 如 图 3-22 所 示 。 


box-sizing: content-box; box-sizing: border-box; 


F100 = = 1000 = 
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padding border padding border 











图 3-22 box-sizing 不 同 值 的 作用 原理 示意 














可 以 看 到 ， 所 谓 box-sizing:border-box 就 是 让 100 像 素 的 宽度 
直接 作用 在 border box 上 ， 从 默认 的 content box 变 成 border box。 此 时 ， 
content box 从 宽度 值 中 释放 ， 形 成 了 局 部 的 流动 性 ， 和 padding 一 起 自 
动 分 配 width 值 。 于 是 ， 


.box { 
width: 166pX; 


box-sizing: border-box; 





宽度 是 100 像 素 ， 


.box { 


width: 166pX; 
box-sizing: border-box; 
border: 1px solid; 





宽度 也 是 100 像 素 ， 


.box { 
width: 166pX; 
box-sizing: border-box; 


padding: 28px; 
border: 1px solid; 





宽度 还 是 100 像 素 。 


我 们 似乎 找到 了 解决 问题 的 钥 是 ， 自 从 用 了 box-sizing ， 标 签 层 
级 少 了 ， 错 位 问题 不 见 了 ， 一 口气 写 5 张 页 面 ， 不 费劲。 








实际 上 ， 妆 遭遇 类 似 图 3-23 所 示 的 布局 时 ， 你 会 发 现 ，box- 
sizing 也 是 捉襟见肘 ， 因 为 边框 外 的 间距 只 能 是 margin ， 但 box- 
sizing 并 不 支持 margin-box ， 若 想 用 一 层 标签 实现 ， 还 是 需要 计 
算 ! 








图 3-23 box-sizing 也 无 能 为 力 的 布局 结构 


2. 为 何 pox-sizing 不 支持 margin-box 





遇 到 这 样 的 场景 的 时 候 ， 想 上 必 有 人 会 感叹 : “要 是 pox-sizing 文 
持 margin-box 就 好 了 。” 是 啊 ， 要 是 这 样 束 好 了 ， 但 是 现实 束 是 不 文 
持 ， 为 什么 呢 ? 














网 上 有 这 样 的 说 法 ， 说 margin 在 垂直 方向 有 合并 重 登 特性 ， 如 果 
文 持 了 margin-box ， 合 并 规则 就 要 发 生变 更 ， 会 比较 复杂 。 我 对 此 观 
点 不 慑 荀 同 ， 其 实 当 下 很 多 属性 可 以 灭 掉 margin 合并 ， 多 一 个 box- 
sizing 又 何妨 ， 且 浏览 器 厂商 实现 起 来 并 不 难 ， 跟 之 前 的 规范 也 不 冲 


人 


I 
9° 








我 个 人 认为 ， 不 支持 margin-box 最 大 的 原因 是 它 本 身 就 没有 价 
值 ! 我 们 不 妨 好 好 想 想 ， 一 个 元 素 ， 如 果 我 们 使 用 width 或 height 设 
定好 了 尺寸 ， 请 问 ， 我 们 此 时 设置 margin 值 ， 其 offset 尺寸 会 有 变化 
吗 ? 不 会 啊 ，100 像 素 宽 的 元 素 ， 再 怎么 设置 margin ， 它 还 是 100 像 素 
宽 。 但 是 ，border 和 padding 就 不 一 样 了 ，100 像 素 宽 的 元 素 ， 设 置 





个 20 像 素 大 小 的 padding 值 ，offsetwidth 就 是 140 像 素 了 ， 尺 寸 会 变 
化 。 你 说 ， 一 个 本 身 并 不 会 改变 元 素 斥 寸 的 盒子 ， 它 有 让 box-sizing 

支持 的 道理 吗 ? box-sizing 束 是 改变 尺寸 作用 规则 的 ! margin 只 有 

在 width 为 auto 的 时 候 可 以 改变 元 素 的 尺寸 ， 但 是 ， 此 时 元 系 已 经 处 

于 流动 性 状态 ， 根 本 就 不 需要 box-sizing 。 所 以 ， 说 来 说 去 就 

是 margin-box 本 和 丑 束 没有 价值 。 





另外 一 个 原因 牵扯 到 语义 。 如 果 box-sizing 开 了 先河 支持 了 
margin-box ，margin box 就 变 成 了 一 个 “ 显 式 的 盒子 ”， 你 让 
background-origin 等 属性 何去何从 ， 文 持 还 是 不 文 持 呢 ?“margin 
的 背景 永远 是 透明 的 ”这 几 个 大 字 可 是 在 规范 写 得 清 清楚 楚 ， 难 道 让 背 
景色 在 所 谓 的 margin box 中 也 显示 ? 显然 是 不 可 能 的 ， 我 们 可 以 打 自 己 
的 脸 ， 但 是 要 想 让 规范 打上 自己 的 脸 ， 可 能 吗 ? 














最 后 还 有 一 个 可 能 的 原因 融 是 使 用 场景 需要 。 对 于 box-sizing 的 
margin-box 效果 ， 如 果 是 IE10 及 以 上 版 本 浏览 器 ， 可 以 试 试 flex 布 
局 ， 如 果 要 兼容 IE8 及 以 上 版 本 可 以 使 用 “宽度 分 离 ”， 或 者 特定 场景 下 
使 用 “格式 化 宽度 ”来 实现 ， 也 就 是 并 不 是 强 需 求 。 比 方 box- 
sizing:padding-box ， 了 就 是 因为 使 用 场景 有 限 ， 仅 Firefox 浏 览 器 文 
持 ， 并 且 是 曾经 文 持 ， 从 版 本 50 开 始 也 不 文 持 了 。 其 实 ， 我 个 人 觉得 没 
必要 舍弃 ， 浏 览 器 都 应 该 文 持 ， 就 像 bDackground 属性 那样 。 成 为 套餐 
不 挺 好 的 ? 

















人 们 写 代 码 时 的 思维 逻辑 ， 总 是 不 由 自主 地 与 现实 世界 相映 射 ， 这 
是 人 之 常情 。 因 此 ， 大 家 对 box-sizing:border-box 的 好 感度 普遍 要 
远大 于 默认 的 box-sizing:content-box ， 甚 至 我 见 到 有 同行 称 默认 


的 content-box 作用 机 制 是 反 人 类 的 ， 因 此 ， 很 多 同行 开始 使 用 * 
{box-sizing:border-box} 进行 全 局 重 置 ， 对 于 这 种 做 法 ， 我 是 有 自 
己 的 看 法 的 。 


3. 如 何 评价 *{box-sizing:border-box} 


从 纯 个 人 角度 讲 ， 我 是 不 喜欢 这 种 做 法 的 ， 我 一 癌 推 和 的 是 充分 利 
用 元 素 本 身 的 特性 来 实现 我 们 想 要 的 效果 ， 足 够 简单 纯粹 。 因 此 ， 全 局 
重 置 的 做 法 是 有 悖 我 的 理念 的 。 


即使 抛 开 个 人 喜好 ， 这 种 做 法 也 是 有 些 问 题 的 。 





(1) 这 种 做 法 易 产 生 没 必要 的 消耗 。 通 配 符 应 该 是 一 个 慎 用 的 选 
择 器 ， 因 为 它 会 选择 所 有 的 标签 元 素 。 对 于 普通 内 联 元 素 〈 非 图 片 等 蔡 
换 元 素 ) ，box-sizing 无 论 是 什么 值 ， 对 其 泻 染 表现 都 没有 影响 ， 因 
此 ， 对 这 些 元 素 而 言 就 是 没有 必要 的 消耗 ， 同 时 有 些 元 素 ， 如 search 
类 型 的 搜索 框 ， 其 默认 的 box-sizing 就 是 porder-box (如 果 浏 览 器 
支持 ) ， 因 此 ，* 对 search 类 型 的 <input> 而 言 也 是 没有 必要 的 消 
耗 。 

















(2) 这 种 做 法 并 不 能 解决 所 有 问题 。box-sizing 不 文 
持 margin-box ， Ried 时 候 ，box-sizing 才能 
真正 无 计算 ， 而 “宽度 分 离 ” 等 策略 则 可 以 彻底 解决 所 有 的 宽度 计算 的 问 
题 。 因 此 ， ii box-sizing 属性 发 明 的 初衷 到 
底 是 什么 ? 是 为 了 让 那些 对 block 水 平 元 素 滥 用 width 属性 的 人 少 出 
bug 吗 ? 我 不 这 么 认为 ! 








4. box-sizing 发 明 的 初衷 


根据 我 这 么 多 年 的 开发 经 验 ， 在 CSS 世 界 中 ， 唯 一 离 不 开 box- 
sizing:border-box 的 就 是 原生 普通 文本 框 <input> 和 文本 域 
<textarea> 的 100% 自 适应 父 容器 宽度 。 


拿 文 本 域 <textarea> 举例 ，<textarea> 为 蔡 换 元 素 ， 蔡 换 元素 
的 特性 之 一 就 是 尺寸 由 内 部 元 素 决 定 ， 且 无 论 其 display 属性 值 
是 inline 还 是 block 。 这 个 特性 很 有 意思 ， 对 于 非 蔡 换 元 素 ， 如 果 
其 display 属性 值 为 block ， 则 会 具有 流动 性 ， 宽 度 由 外 部 尺寸 决定 ， 
但 是 蔡 换 元 素 的 宽度 却 不 受 display 水 平 影响 ， 因 此 ， 我 们 通过 CSS 修 
改 <textarea> 的 display 水 平 是 无 法 让 尺寸 100% 目 适应 父 容器 的 : 





textarea { 
display: block; /* 还 是 原来 的 尺寸 */ 





所 以 ， 我 们 只 能 通过 width 设 定 让 <textarea> 尺寸 100% 自 适应 父 容 
器 。 那 么 ， 问 题 就 来 了 ，<textarea> 是 有 border 的 ， 而 且 需 要 有 一 
定 的 padding 大 小 ， 否 则 输入 的 时 候 光 标 会 顶 着 边框 ， 体 验 很 不 好 。 于 
是 ，width /border 和 padding 注定 要 共存 ， 同 时 还 要 整体 宽度 100% 
目 适 应 容器 。 如 采 不 借助 其 他 标签 ， 肯 定 是 无 解 的 。 


在 浏览 器 还 没 文 持 box-sizing 的 年 代 ， 我 们 的 做 法 有 点 儿 类 似 
于 “宽度 分 离 ”， 外 面 仍 套 <div> 标签 ， 模 拟 border 和 padding 
，<textarea> 作为 子 元 素 ，border 和 padding 全 部 为 6 ， 然 后 宽度 
1009%6 目 适应 父 级 <div> 。 





手动 输入 http:/demo.cssworld.cn/3/2-9.php 或 者 扫 右 侧 的 二 维和 码 。 





然而 ， 这 种 模拟 也 有 局 限 性 ， 比 如 无 法 使 用 :focus 高 襄 父 级 的 边 
框 ， 因 为 CSS 世 界 中 并 无 父 选 择 器 ， 只 能 使 用 更 复杂 的 磐 套 加 其 他 CSS 
技巧 来 模拟 。 


因此 ， 说 来 说 去 ， 也 就 box-sizing:border-box 才 是 根本 解决 之 
textarea { 


width: 1662%; 
-ms-box-sizing: border-box; /* for IE8 */ 


box-sizing: border-box; 


} 





在 我 看 来 ，box-sizing 被 发 明 出 来 最 大 的 初衷 应 该 是 解决 蔡 换 元 
素 宽 度 自 适应 问题 。 如 果真 的 如 我 所 言 ， 那 *{box-sizing:border- 
box} 是 不 是 没 用 在 点 儿 上 呢 ? 是 不 是 应 该 像 下 面 这 样 CSS 重 置 才 更 合 
理 呢 ? 


input, textarea, img, video, object { 


box-sizing: border-box; 
} 


3.2.5 ”相对 简单 而 单纯 的 height:auto 


width 和 height 是 CSS 世 界 中 同一 类 型 魔法 师 ， 都 是 直接 限定 元 
素 尺 寸 的 。 所 以 ， 它 们 共用 一 套 “ 使 太 寸 "模型 ，box-sizing 的 解释 也 
是 类 似 的 。 但 是 ， 它 们 在 不 少 地 方 还 是 有 明显 区 别 的 ， 其 中 之 一 就 
是 height:auto 要 比 width:auto 简单 而 单纯 得 多 。 





原因 在 于 ，CSS 的 默认 流 是 水 平方 向 的 ， 宽 度 是 稀缺 的 ， 高 度 是 无 
限 的 。 因 此 ， 宽 度 的 分 配 规则 就 比较 复杂 ， 高 度 就 显得 比较 随意 。 比 方 
说 ， 小 明 没 钱 交 房租 而 去 搬 砖 ， 一 块 砖头 5 cm 高 ， 请 问 ，10 块 砖 摆 在 一 
起 多 高 ?很 简单 ，50 cm。height:auto 的 表现 也 基本 上 就 是 这 个 套 
路 : 有 几 个 元 素 盒 子 ， 每 个 多 高 ， 然 后 一 加 ， 就 是 最 终 的 高 度 值 了 。 











当然 ， 涉 及 具体 场景 ， 就 会 有 其 他 的 小 故事 ， 比 方 说 元 素 float 容 
器 高 度 没 了 ， 或 者 是 margin 直接 穿 过 去 ， 高 度 比 预期 的 矮 了 。 这 个 其 
实 不 是 height 的 问题 。 关 于 这 一 点 ， 我 会 在 对 应 的 属性 章节 帮 大 家 一 
探究 疯 。 





此 外 ，height:auto 也 有 外 部 尺寸 特性 。 但 据 我 所 知 ， 其 仅 存 在 
于 绝对 定位 模型 中 ， 也 就 是 “格式 化 高 度 ”。“ 格 式 化 高 度 ” 与 “格式 化 宽 
度 ” 类 似 ， 就 不 展开 讲解 了 。 














3.2.6 ”关于 height:166% 


height 和 width 还 有 一 个 比较 明显 的 区 别 就 是 对 百分比 单位 的 文 


持 。 对 于 width 属性 ， 就 算 父 元 素 width 为 auto ， 其 百分比 值 也 是 支 
持 的 ， 但是， 对 于 height 属性 ， 如 果 父 元 素 height 为 auto ， 只 要 子 
元 素 在 文档 流 中 ， 其 百分比 值 完全 就 被 忽略 了 。 例 如 ， 某 小 白 想 要 在 页 
面 插入 一 个 <div> ， 然 后 满 屏 显示 背景 图 ， 就 号 了 如 下 CSS: 





div { 
width: 166%;  /* 这 是 多 余 的 */ 
height: 166%; ”/* 这 是 无 效 的 */ 





background: url(bg.jpg); 
} 





然后 他 发 现 这 个 <div> 高 度 永远 是 6 ， 哪 怕 其 父 级 cbody> 塞 满 了 内 容 
也 是 如 此 。 事 实 上 ， 他 需要 如 下 设置 才 行 : 
html, body { 


height: 166%; 
} 





并 且 仅仅 设置 <body> 也 是 不 行 的 ， 因 为 此 时 的 <body> 也 没有 有 具体 的 高 
度 值 : 


body { 
/* 子 元 素 height:166% 依 旧 无 效 */ 


} 





只 要 经 过 一 定 的 实践 ， 我 们 都 会 发 现 对 于 普通 文档 流 中 的 元 素 ， 百 
分 比 高 度 值 要 想起 作用 ， 其 父 级 必须 有 一 个 可 以 生效 的 高 度 值 ! 但 是 ， 
人 是 很 少 有 人 思考 过 这 样 一 个 问题 : 为 何 父 级 没有 有 共 体 高 度 值 的 时 候 ， 
height:166% 会 无 效 ? 








1. 为 何 height:166% 无 效 


有 一 种 看 似 合理 的 说 法 : 如 果 父 元 素 height :auto 子 元 素 还 文 

持 height:166% ， 则 父 元 素 的 高 度 很 容易 陷入 死 循环 ， 高 度 无 限 。 例 
如 ， 一 个 <div> 元 素 里 面 有 一 张 vertical-align 为 bottom 同时 高 度 
为 192 像 素 的 图 片 ， 此 时 ， 该 cdiv> 高 度 就 是 192 像 素 ， 假 设 此 时 插入 
一 个 子 元 素 ， 高 度 设 为 66% ， 如 果 此 时 height:166% 可 以 计算 ， 则 子 
元 素 应 该 也 是 192 像 素 。 但 是 ， 父 元 素 height 值 是 auto ， 电 不 是 现在 
高 度 要 从 原来 的 192 像 素 变 成 384 像 素 ， 然 后 height :166% 的 子 元 素 高 
度 又 要 变 成 384 像 系 ， 父 元 素 高 度 又 双 倍 .…… 死 循环 了 ! 























实际 上 ， 这 种 解释 是 错误 的 ， 大 家 干 万 别 被 误导 。 证 据 就 是 宽度 也 
存在 类 似 场景 ， 但 并 没有 死 循环 。 例 如 ， 在 下 面 这 个 例子 中 ， 父 元 素 采 
用 “最 大 宽度 ”"， 然 后 有 一 个 jnline-block 子 元 素 宽 度 166% : 


<div class="box"> 

<img src="1.jpg"> 

<span class="text" > 红色 背 景 是 父 级 </spany> 
</div> 
.box { 

display: inline-block; 

white-space: nowrap; 

background-color: #cd66080; 





.text { 
display: inline-block; 
width: 1662%; 
background-color: #34538b; 
color: #fff; 

} 





如 果 按 照 上 面 “ 高 度 死 循 环 ” 的 解释 ， 这 里 也 应 该 “宽度 死 循 环 ”"， 因 为 后 
面 的 jnline-block 元 素 按照 我 们 的 理解 应 该 会 让 父 元 素 的 宽度 进一步 
变 大 。 但 实际 上 并 没有 ， 宽 度 范围 可 能 超出 你 的 预期 〈 见 图 3-24) 。 父 


元 素 的 宽度 就 是 图 片 加 文字 内 容 的 宽度 之 和 。 


手动 输入 http:/demo.cssworld.cn/3/2-10.php 或 者 扫 右 侧 的 二 维 码 。 


红色 背景 是 父 级 





图 3-24 ”宽度 为 图 片 加 文字 内 容 的 宽度 之 和 
为 什么 会 这 样 表现 呢 ? 


要 明白 其 中 的 原因 要 先 了 解 浏览 器 泻 染 的 基本 原理 。 首 先 ， 先 下 载 
文档 内 容 ， 加 载 头 部 的 样式 资源 〈 如 果 有 的 话 ) ， 然 后 按照 从 上 而 下 、 
自 外 而 内 的 顺序 演 染 DOM 内 容 。 套 用 本 例 就 是 ， 先 演 染 父 元 素 ， 后 演 
染 子 元 素 ， 是 有 先后 顺序 的 。 因 此 ， 当 演 染 到 父 元 素 的 时 候 ， 子 元 素 的 
width:166% 并 没有 演 染 ， 宽 度 就 是 图 片 加 文字 内 容 的 宽度 ;等 泻 染 到 
文字 这 个 子 元 素 的 时 候 ， 父 元 素 宽 度 已 经 固定 ， 此 时 的 width:166% 就 

















是 已 经 固定 好 的 父 元 素 的 宽度 。 宽 度 不 够 怎么 办 ? 浇 出 就 好 
了 ，overflow 属性 就 是 为 此 而 生 的 。 


同样 的 道理 ， 如 果 height 支持 任意 元 素 166% ， 也 是 不 会 死 循环 
的 。 和 宽度 类 似 ， 静 态 泻 染 ， 一 次 到 位 。 

那 问 题 又 来 了 : 为 何 宽度 文 持 ， 高 度 就 不 支持 呢 ?” 规 范 中 其 实 给 出 
了 答案 。 如 果 包 含 块 的 高 度 没 有 显 式 指定 〈 即 高 上 度 由 内 容 决 定 ) ， 并 且 
该 元 素 不 是 绝对 定位 ， 则 计算 值 为 auto 。 一 句 话 总 结 就 是 : 因为 解释 
成 了 auto 。 要 知道 ，auto 和 百分比 计算 ， 肯定 是 算 不 了 的 : 


'auto' * 166/166 = NaN 


但 是 ， 宽 度 的 解释 却 是 :如果 包含 块 的 宽度 取决 于 该 元 素 的 宽度 ， 那 么 
产生 的 布局 在 CSS 2.1 中 是 未 定义 的 。 














还 记 不 记得 本 书 第 2 章 最 后 的 “未 定义 行为 * 吗 ?这 里 的 宽度 布局 其 
实 也 是 “未 定义 行为 ”， 也 就 是 规范 没有 明确 表示 该 怎样 ， 浏 览 器 可 以 自 
己 根 据 理解 去 发 挥 。 好 在 根据 我 的 测试 ， 布 局 效果 在 各 个 浏览 器 下 都 是 
一 致 的 。 这 里 和 高 度 的 规范 定义 就 区 别 明 显 了 ， 高 度 明 确 了 就 是 auto 
， 高 度 百 分 比 计算 自然 无 果 ，width 却 没 有 这 样 的 说 法 ， 因 此 ， 就 按照 
包含 块 真实 的 计算 值 作为 百分比 计算 的 基数 。 








2. 如 何 让 元 素 文 持 height:166% 效果 


如 何 让 元 素 文 持 height:166% 效果 ? 这 个 问题 的 答案 其 实 上 面 的 
规范 已 经 给 出 了 ， 即 有 两 种 方法 。 


(1) 设 定 显 式 的 高 度 值 。 这 个 没什么 好 说 的 ， 例 如 ， 设 
置 height:666px ， 或 者 可 以 生效 的 百分比 值 蝇 度 。 例 如 ， 我 们 比较 第 
见 的 : 


html, body { 
height: 166%; 


} 





(2) 使 用 绝对 定位 。 例 如 : 


div { 
height: 166%; 


position: absolute; 





此 时 的 height:166% 就 会 有 计算 值 ， 即 使 祖先 元 素 的 height 计算 
为 auto 也 是 如 此 。 需 要 注意 的 是 ， 绝 对 定位 元 素 的 百分比 计算 和 非 绝 
对 定位 元 素 的 百分比 计算 是 有 区 别 的 ， 区 别 在 于 绝对 定位 的 宽 高 百分比 
计算 是 相对 于 padding box 的 ， 也 束 是 说 会 把 padding 大 小 值 计 算 在 内 ， 
但 是 ， 非 绝对 定位 元 素 则 是 相对 于 content box 计 算 的 。 














我 们 可 以 看 一 个 例子 ， 对 比 一 下 : 





.box { 
height: 166pX; 
padding: 36pX; 
box-sizing: border-box; 
background-color: #beceeb; 


} 


.Child { 
height: 166%; 
background-color: #cd66080; 
} 


.box { 
height: 166pX; 
padding: 36pX; 
box-sizing: border-box; 
background-color: #beceeb; 
position: relative; 

} 

.Child { 
height: 166%; width: 166%; 
background-color: #cd66080; 
position: absolute; 


} 








可 以 看 到 ， 非 定位 元 素 的 宽 高 百分比 计算 不 会 将 padding 计算 在 
内 ， 如 图 3-25 所 示 。 


如 果 对 图 3-25 所 示 的 结果 表示 质疑 ， 也 可 以 访问 
http://demo.cssworld.cn/ 3/2-11.php 或 者 扫 下 面 的 二 维 码 。 











图 3-25 ”绝对 定位 和 非 绝 对 定位 百分比 高 度 对 比 











我 对 这 两 种 height:166% 生效 方法 的 评价 是 : 显 式 高 度 方 法 中 规 
中 矩 ， 意 料 之 中 ;绝对 定位 方法 剑 走 俩 锋 ， 文 持 隐 陈 高 度 计 算 ， 给 人 意 
外 之 喜 ， 但 本 刁 脱离 文档 流 ， 使 其 仅 在 某 些 场景 有 四 两 拨 千 帮 的 效 打 ， 
比方 该 “图 片 左右 半 区 点 击 分别 上 一 张 图 下 一 张 图 效果 ”的 布局 〈 见 图 3- 
26) 。 











图 3-26 所 示 的 效果 有 专门 的 演示 页 面 ， 可 以 手动 输入 
http://demo.cssworld.cn/3/2-12.php 或 者 扫 下 面 的 二 维 码 。 











图 3-26 ”图 片上 下 切 图 布局 示意 














原理 很 简单 ， 就 是 在 图 片 外 面包 一 层 具 有 “ 包 于 性 ”同时 具有 定位 特 
性 的 标签 。 例 如 : 


.box { 
display: inline-block; 


position: relative; 


} 














此 时 ， 只 要 在 图 片上 履 盖 两 个 绝对 定位 ， 同 时 设 height:166% ， 则 无 
论 图 片 多 高 ， 我 们 的 左右 半 区 都 能 自动 和 图 片 高 度 一 模 一 样 ， 无 须 任何 
使 用 JavaScript 的 计算 。 





3.3 CSS min-width/max-width 和 min- 
height/max-height 二 三 事 


说 完了 width 和 height ， 下 面 轮 到 min-width/max-width 和 min- 
height/max-height 了， 它们 有 很 多 共性 。 比 方 说 ， 它 们 都 是 与 尺寸 
相关 的 ， 盒 尺寸 机 制 和 一 些 值 的 演 染 规则 也 是 一 样 的 ， 因 此 ， 这 部 分 内 
容 这 里 束 不 歼 述 了 ， 这 里 只 简单 讲 几 点 min/max-width/height 和 


width/height 不 一 样 的 地 方 。 


3.3.1 ”为 流体 而 生 的 mijn-width/max-width 








在 CSS 志 界 中 ，min-width/max-width 出 现 的 场景 一 定 是 自 适 应 
布局 或 者 流体 布局 中 ， 因 为 ， 如 果 是 那 种 width/height 定 死 的 砖头 式 
布局 ，min-width/max-width 就 没有 任何 出 现 的 价值 ， 因 为 它们 是 具 
有 边界 行为 的 属性 ， 所 以 没有 变化 自然 无 法 触发 ， 也 就 没有 使 用 价值 。 





因此 ， 新 人 并 不 会 经 常 使 用 min-width/max-width ， 只 有 随 着 
CSS 技 能 深入 ， 能 够 兼顾 还 原 性 的 同时 还 兼顾 扩展 性 和 适 配 性 之 
后 ，min-width/max-width 才 会 用 得 越 来 越 多 ， 也 才能 真正 感受 到 IE7 
浏览 器 就 支持 min/max-width 是 多 么 好 的 一 件 事情 。 








现代 桌面 显示 器 分 辨 率 越 来 越 大 ，960 像 素 网 页 设计 已 经 显得 有 些 
小 家 碧玉 了 ， 但 随便 搞 一 个 大 尺寸 (如 1400 像 素 ) 的 网 页 宽度 也 不 合 时 
宜 ， 因 为 还 有 很 多 笔记 本 用 户 ， 此 时 ， 一 种 特定 区 间 内 的 自 适 应 布局 方 
案 就 诞生 了 ， 网 页 宽度 在 1200 一 1400 像 素 自 适 应 ， 既 满足 大 屏 的 大 气 ， 
又 满足 笔记 本 的 良好 显示 ， 此 时 ，min-width/max-width 就 可 以 大 显 
神威 了 : 





.Container { 
min-width: 12686px; 
max-width: 14660pX; 


} 





对 ， 无 须 width 设置 ， 直 接 使 用 min-width/max-width 。 


在 公众 号 的 热门 文章 中 ， 经 常会 有 图 片 ， 这 些 图 片 都 是 用 户 上 传 产 


生 的 ， 因 此 尺寸 会 有 大 有 小 ， 为 了 避免 图 片 在 移动 端 展示 过 大 影响 体 
验 ， 常 第 会 有 有 下面 的 max-width 限制 : 








img { 
max-width: 166%; 


height: auto!important; 


} 





height:auto 是 必需 的 ， 否 则 ， 如 果 原 始 图 片 有 设 定 height 
，max-width 生效 的 时 候 ， 图 片 驶 会 被 水 平 压缩 。 强 制 height 为 auto 
可 以 确保 宽度 不 超出 的 同时 使 图 片 保持 原来 的 比例 。 但 这 样 也 会 有 体验 
上 的 问题 ， 那 融 是 在 加 载 时 图 片 占据 高 度 会 从 0 变 成 计算 高 度 ， 图 文 会 
有 明显 的 深 布 式 下 洲 。 


3.3.2 与 众 不 同 的 初始 值 


min-width/max-width 和 min-heigh/max-height 从 长 相 上 看 明 
显 和 width/ height 是 一 个 家 族 的 ， 总 以 为 属性 值 、 模 型 都 是 一 样 
的 ， 但 是 有 一 个 地 方 就 摘 了 特殊 ， 那 就 是 初始 值 。width/Vheight 的 默 
认 值 是 auto ， 而 min-width/max-width 和 min-heigh/ max-height 
的 初始 值 则 要 复杂 些 。 这 里 要 分 为 两 部 分 ， 分 别 是 max-* 系列 和 min-* 
系列 。max-width 和 max-height 的 初始 值 是 none ，min-width 和 
min-height 的 初始 值 是 .…… 








虽然 MDN 和 W3C 维 基 的 文档 上 都 显示 min-width/min-height 的 
初始 值 是 8 ， 但 是 ， 根 据 我 的 分 析 和 测试 ， 所 有 浏览 器 中 的 min- 
width/min-height 的 初始 值 都 是 auto 。 证 据 如 下 : 


(1) min-wdith/height 值 为 auto 合法 。 例 如 ， 设 置 : 


<body style="min-width:auto;"> 





结果 所 有 浏览 器 


document .body.style.minWidth; // 结果 是 auto 





说 明 min-* 支持 auto 值 ， 同 样 ， 如 果 是 max-width:auto ， 结 果 则 
是 '' ， 进 一 步 证 明 min-width/height 值 为 auto 合法 。 


(2) 数值 变化 无 动画 。 假 设 元 素 的 min-width/min-height 的 初 
始 值 是 6 ， 那 么 ， 当 我 们 设置 transition 过 渡 同 时 改变 了 min- 
width/min-height 值 ， 岂 不 是 应 该 有 动画 效果 ? 结果 : 


.box { 
transition: min-height .3s; 


} 

.box:hover { 
min-height: 366pX; 

} 








鼠标 经 过 .box 元素， 元素 突 然 变 高 ， 并 无 动画 效果 ， 但 是 ， 如 果 是 下 
面 这 样 的 设置 : 


.box { 
min-height: 0; 
transition: min-height .3s; 


} 


.box:hover { 
min-height: 366pX; 
} 





鼠标 经 过 .box 元 素 ，transition 动画 效果 就 出 现 了 。 这 就 证 明 
了 ，min-height 的 初始 值 不 是 6 ， 既 然 不 是 8e， 那 就 应 该 是 所 有 浏览 
器 都 文 持 的 auto 。 





于 是 ， 得 到 如 下 结论 : min-width/min-height 的 初始 值 是 auto 
，max-width/max-height 的 初始 值 是 none 。max-width/max- 
height 的 初始 值 为 何 是 none 而 不 是 auto 呢 ? 这 个 问题 的 答案 其 实 与 
下 面 小 节 的 内 容 有 关 。 我 们 不 妨 举 个 简单 的 例子 解释 一 下 ， 已 知 父 元 素 
宽度 400 像 素 ， 子 元 素 设置 宽度 800 像 素 ， 假 如 说 max-width 初始 值 
是 auto ， 那 自然 使 用 和 width 一 样 的 解析 演 染 规则 ， 此 时 max-width 
的 计算 值 就 应 该 是 父 元 素 的 400 像 素 ， 此 时 ， 你 束 会 发 现 ， 子 元 素 的 800 
像 系 直接 完 告 了 ， 因 为 max-width 会 履 盖 width 。 A 我 们 的 width 
水 远 不 能 设置 为 比 auto 计算 值 更 大 的 宽度 值 了 ， 这 显然 是 有 问题 的 ， 
这 就 是 为 什么 max-width 初始 值 是 none 的 原因 。 











3.3.3 ”超越 1important， 超越 最 大 


CSS 世 界 中 ，min-width/max-width 和 min-height/max-height 
属性 间 ， 以 及 与 width 和 height 之 间 有 一 套 相互 敢 羡 的 规则 。 这 套 规 
则 用 一 句 比较 通俗 的 话 概 括 就 是 : 超越 !important， 超越 最 大 。 完 竟 
是 什么 意思 呢 ? 以 与 宽度 相关 的 属性 举例 说 明 。 


1. 超越 !important 


超越 !important 指 的 是 max-width 会 覆盖 width ， 而 且 这 种 履 盖 
不 是 普通 的 履 盖 ， 是 超级 履 羡 ， 上 履 盖 到 什么 程度 呢 ? 大 家 应 该 都 知道 
CSS 世 界 中 的 !important 的 权重 相当 高 ， 在 业界 ， 往 往 会 








把 !important 的 权重 比 成 “泰坦 尼 元 ”， 比 直接 在 元 素 的 style 属性 中 
设置 CSS 声 明 还 要 高 ， 一 般 用 在 CSS 履 盖 JavaScript 设 置 上 。 但 是 ， 就 是 
这 么 厉害 的 !important ， 直 接 被 max-width 一 个 浪头 就 拍 沉 了 。 比方 
说 ， 针 对 下 面 的 HTML 和 CSS 设 置 ， 图 片 最 后 呈现 的 宽度 是 多 少 呢 ? 





<img src="1.jpg" style="width:486px!important;"> 


img { max-width: 256px; } 





答案 是 256px 。style 、!important 通通 靠边 站 ! 因为 max-width 会 
覆盖 width 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/3-1.php 或 者 扫 下 面 的 
二 维 码 。 结 果 如 图 3-27 所 示 。 








图 3-27 图 片 宽度 256 像 素 
2. 超越 最 大 


超越 最 大 指 的 是 min-width 和 窗 盖 max-width ， 此 规则 发 生 在 min- 
width 和 max-width 冲突 的 时 候 。 例 如 ， 下 面 这 种 设置 : 


.container { 
min-width: 1468px; 


max-width: 1268px; 
} 





最 小 宽度 居然 比 最 大 宽度 设置 得 还 大 ， 此 时 ， 两 者 必定 是 你 死 我 活 
的 状态 。 究 竞 谁 死 呢 ?遵循 “超越 最 大 ”规则 (注意 不 是 “后 来 居 上 ” 规 
则 ) ，min-width 活 下 来 ，max-width 被 忽略 ， 于 是 ，.container 元 
素 表现 为 至 少 1400 像 素 宽 。 








此 禾 新 规则 比较 好 理解 ， 就 不 专门 演示 了 。 
3.3.4 任意 高 度 元 素 的 展开 收 起 动画 技术 
“展开 收 起 ”效果 是 网 页 中 比较 常见 的 一 种 交互 形式 ， 通 常 的 做 法 是 





控制 display 属性 值 在 none 和 其 他 值 之 间 切 换 ， 虽 说 功能 可 以 实现 ， 
但 是 效果 略 显 生硬 ， 所 以 就 会 有 这 样 的 需求 一 一 希望 元 素 展开 收 起 时 能 
有 明显 的 高 度 滑 动 效 果 。 传 统 实现 可 以 使 用 jQuery 的 
slideUp()/slideDown() 方法 ， 但 是 ， 在 移动 端 ， 因 为 CSS3 动 画 文 持 
良好， 所 以 移动 端的 JavaScript 框 架 都 是 没有 动画 模块 的 。 此 时 ， 使 用 
CSS 实 现 动画 就 成 了 最 佳 的 技术 选 型 。 














我 们 的 第 一 反应 就 是 使 用 height + overflow:hidden 实现 。 但 
是 ， 很 多 时 候 ， 我 们 展开 的 元 素 内 容 是 动态 的 ， 换 句 话 说 高 度 是 不 固定 
的 ， 因 此 ，height 使 用 的 值 是 默认 的 auto ， 应 该 都 知道 的 auto 是 个 
关键 字 值 ， 并 非 数值 ， 正 如 height:166% 的 166% 无 法 和 auto 相 计 算 一 
样 ， 从 epx 到 auto 也 是 无 法 计算 的 ， 因 此 无 法 形成 过 渡 或 动画 效果 。 








因此 ， 下 面 代 码 呈 现 的 效果 也 古 生 便 地 展开 和 收 起 : 


.element { 
height: 6 
overflow: hidden; 
transition: height .25s; 


} 
.element.active { 

height: auto; /* 没有 transition 效 果 ， 只 是 生硬 地 展开 */ 
} 











难道 就 没有 什么 一 劳 永 逸 的 实现 方法 吗 ? 有， 不 妨 试 试 max- 
height ，CSS 代 码 如 下 : 





.element { 
max-height: 6 
overflow: hidden; 
transition: max-height .25s; 


} 


.element .active { 
max-height: 666px; /* 一 个 足够 大 的 最 大 高 度 值 */ 
} 








其 中 展开 后 的 max-height 值 ， 我 们 只 需要 设 定 为 保证 比 展开 内 容 高 度 
大 的 值 就 可 以 ， 因 为 max-height 值 比 height 计算 值 大 的 时 候 ， 元 素 
的 高 度 就 是 height 属性 的 计算 高 度 ， 在 本 交互 中 ， 也 就 

是 height:auto 时 候 的 高 度 值 。 于 是 ， 一 个 高 度 不 定 的 任意 元 素 的 展 
开动 画 效 末 就 实现 了 。 

















眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/3/3-2.php 或 者 扫 右 侧 的 
二 维 人 码 。 





但 是 ， 使 用 此 方法 也 有 一 点 要 注意 ， 即 虽然 说 从 适用 范围 讲 ，max- 
height 值 越 大 使 用 场景 越 多 ， 但 是 ， 如 果 max-height 值 太 大 ， 在 收 
起 的 时 候 可 能 会 有 “效果 延迟 ”的 问题 ， 比 方 说 ， 我 们 展开 的 元 素 高 度 是 
100 像 素 ， 而 max-height 是 1000 像 素 ， 动 画 时 间 是 250 ms， 假 设 我 们 





动画 函数 是 线性 的 ， 则 前 225 ms 我 们 是 看 不 到 收 起 效果 的 ， 因 为 max- 
height 从 1000 像 素 到 100 像 素 变化 这 段 时 间 ， 元 素 不 会 有 区 域 被 隐藏 ， 
会 给 人 动画 延迟 225 ms 的 感觉 ， 相 信 这 不 是 你 想 看 到 的 。 


因此 ， 我 个 人 建议 max-height 使 用 足够 安全 的 最 小 值 ， 这 样 ， 收 
起 时 即使 有 延迟 ， 也 会 因为 时 间 很 得 ， 很 难 被 用 户 察 党 ， 并 不 会 影 啊 体 


验 。 


3 订 


如 果 纯 粹 套 CSS 规 范 的 话 ， 这 里 标题 应 该 是 “内 联 级 元 素 ”(inline- 
level elements) 。 但 在 本 书 中 “内 联 级 元 素 ” 全 部 简称 为 “内 联 元 素 ”， 原 
因 在 第 3 章 开 头 部 分 已 做 说 明 ， 不 再 袭 述 。 


在 讲 元 素 的 内 外 盒子 的 时 候 ， 前 面 曾 提 到 过 “外 在 盒子 "有 inline 
、block 和 run-in 三 种 水 平 。 其 中 run-in 鲜 有 人 使 用 ， 且 有 淘汰 风 
险 ， 可 以 忽略 ; 剩 下 的 inline 和 block 几乎 瓜分 了 剩 下 的 全 部 江山 ， 
是 流体 布局 的 本 质 所 在 。 从 作用 上 来 讲 ， 块 级 负责 结构 ， 内 联 负 责 内 
容 。CSS 世 界 是 为 图 文 展示 而 设计 的 。 所 谓 图 文 ， 指 图 乒 和 文字 ， 是 最 
典型 的 内 联 元 素 。 所 以 ， 在 CSS 世 界 中 ， 内 联 元 素 是 最 为 重要 的 ， 涉 及 
的 CSS 属 性 也 非常 之 多 ， 这 些 CSS 属 性 往往 具有 继承 特性 ， 混 合 在 一 起 
会 导致 CSS 解 析 规 则 非常 复杂 。 这 就 是 内 联 元 素 的 解析 比 块 级 元 素 解 析 
更 难 理解 的 原因 一 一 其 是 多 个 属性 共同 作用 的 结果 ， 需 要 对 内 联 元 素 特 
性 ， 内 联 盒 模型 以 及 当前 CSS 属 性 都 了 解 ， 才 能 明白 其 中 的 原因 。 





不 要 担心 ， 从 这 里 开始 ， 我 们 会 慢 慢 揭 开 内 联 世 界 的 层 层面 纱 。 


3.4.1 ”哪些 元 素 是 内 联 元 素 
我 们 先 来 了 解 如 何 辨 别 内 联 元 素 。 
1. 从 定义 看 








站 先 要 明日 这 一 点 :“ 内 联 元 素 ” 的 “内 联 ” 特 指 “ 外 在 盒子 ”， 
和 “display 为 inline 的 元 素 ” 不 是 一 个 概念! inline-block 和 
inline-table 都 是 “内 联 元 素 *”， 因 为 它们 的 “外 在 盒子 ”都 是 内 联 盒 
子 。 自 然 display :inline 的 元 素 也 是 “内 联 元 素 ”， 那 么 ，<buttony> 
按钮 元 素 是 内 联 元 素 ， 因 为 其 display 默认 值 是 ijnline-block 
; 《img> 图 片 元 素 也 是 内 联 元 素 ， 因 为 其 display 默认 值 是 inline 


网 
等 。 





2. 从 表现 看 





就 行为 表现 来 看 , “内 联 元 素 ” 的 典型 特征 就 是 可 以 和 文字 在 一 行 显 
示 。 因 此 ， 文 字 是 内 联 元 素 ， 图 片 是 内 联 元 素 ， 按 钮 是 内 联 元 系 ， 输 入 
框 、 下 拉 框 等 原生 表单 控件 也 是 内 联 元 系 。 














下 面 有 一 个 疑问 : 浮动 元 素 貌 似 也 是 可 以 和 文字 在 一 个 水 平 上 显示 
的 ， 是 不 是 浮动 元 素 也 是 内 联 级 别 的 呢 ? 不 是 的 。 实 际 上 ， 浮 动 元 素 和 和 
后 面 的 文字 并 不 在 一 行 显示 ， 浮 动 元 系 已 经 在 文档 流 之 外 了 。 证 据 束 
是 ， 当 后 面 文字 足够 多 的 时 候 ， 文 字 并 不 是 在 序 动 元 系 的 下 面 ， 而 古 继 
续 在 后 面 。 这 就 说 明 ， 浮 动 元 素 和 后 和 面 文字 不 在 一 行 ， 只 是 它们 恰好 站 
在 了 一 起 而 已 。 真 相 是 ， 浮 动 元 素 会 生成 “ 块 例子”， 这 就 是 后 话 了 。 


3.4.2 ”内 联 世 界 深 入 的 基础 一 一 内 联 盒 模型 


























本 节 的 内 容 可 谓 CSS 进 阶 标志 知识 点 ， 是 入 门 CSS 开 发 人 员 和 熟练 
CSS 开 发 人 员 之 间 的 分 水 岭 ， 是 需要 反复 拿 来 看 拿 来 体味 的 。 这 里 介绍 
的 “内 联 盒 模型 ?是 简易 版 ， 但 是 已 经 足够 ， 如 果 大 家 对 完整 的 概念 和 名 
词 感 兴趣 ， 可 以 阅读 规范 文档 。 




















下 面 是 一 段 很 普通 的 HTML: 





<p> 这 是 一 行 普通 的 文字 ， 这 里 有 个 <em>em</em> 标签 。</p> 





看 似 普通 ， 实 际 上 包含 了 很 多 术语 和 概念 ， 或 者 换 种 通俗 的 说 法 ， 
包含 了 很 多 种 盒子 。 我 归结 为 下 面 这 些 盒子 。 


(1) 内 容 区 域 (content area) 。 内 容 区 域 指 一 种 围绕 文字 看 不 见 
的 盒子 ， 其 大 小 仅 受 字符 本 喘 特 性 控制 ， 本 质 上 是 一 个 字符 盒子 
(character box) ; 但 是 有 些 元 素 ， 如 图 片 这 样 的 蔡 换 元 素 ， 其 内 容 显 
然 不 是 文字 ， 不 存在 字符 盒子 之 类 的 ， 因 此 ， 对 于 这 些 元 素 ， 内 容 区 域 
可 以 看 成 元 了 素 自身 。 











定义 上 说 内 容 区 域 是 “看 不 见 的 "， 这 对 理解 “内 容 区 域 ” 是 不 利 的 ， 
好 在 根据 我 多 年 的 理解 与 实践 ， 我 们 可 以 把 文本 选中 的 背景 色 区 域 作为 
内 容 区 域 ， 例 如 ， 如 图 3-28 所 示 。 





图 3-28 ”内 容 区 域 示意 





这 对 于 解释 各 种 内 联 相 关 的 行为 都 非常 可 行 ， 文 本 选中 区 本 质 上 就 
等 同 于 基本 盒 尺 寸 中 的 content box， 都 是 content ， 语 义 上 也 说 得 通 。 








实际 上 ， 内 容 区 域 并 没有 明确 的 定义 ， 所 以 将 其 理解 为 em 盒 〈(em- 
box， 可 看 成 是 中 文字 符 占据 的 1 em 高 度 区 域 ) 也 是 可 以 的 ， 但 是 在 本 
书 中 ， 为 了 方便 演示 和 讲解 ， 将 其 全 部 理解 为 文本 选中 的 区 域 。 





在 IE 和 Firefox 浏 览 器 下， 文字 的 选中 背景 总 能 准确 反映 内 容 区 域 范 
围 ， 但 是 Chrome 浏 览 器 下 ，: :selection 范围 并 不 总 是 准确 的 ， 例 
如 ， 和 图 片 混 排 或 者 有 垂直 padding 的 时 候 ， 范 围 会 明显 过 大 ， 这 一 点 
需要 注意 。 后 面 行 高 等 章节 会 利用 此 选中 背景 帮助 我 们 理解 。 








内 容 区 域 在 解释 内 联 元 素 的 各 种 行为 表现 时 ， 出 镜 率 出 奇 地 高 ， 建 
议 大 家 这 里 多 多 留意 。 


(2) 内 联 盒子 (inline box) 。“ 内 联 盒子 ?不 会 让 内 容 成 块 显示 ， 
而 是 排 成 一 行 ， 这 里 的 “内 联 盒子 实际 指 的 就 是 元 系 的 “外 在 盒子 ">， 用 
来 决定 元 素 是 内 联 还 是 块 级 。 该 盒子 又 可 以 细 分 为 “内 联 盒子 ”和 “匿名 
内 联 盒子 ”两 类 : 





如 果 外 部 含 内 联 标签 (xspan> 、<a> 和 <em> 等 ) ， 则 属于 “内 联 
盒子 ”〈 实 线 框 标注 ) ; 如 果 是 个 光秃秃 的 文字 ， 则 属于 “匿名 内 联合 
子 ” (虚线 框 标 注 〉。 





需要 注意 的 是 ， 并 不 是 所 有 光 乔 天 的 文字 者 是 “匿名 内 联 盒子 ”， 其 
还 有 可 能 是 “匿名 块 级 盒子 ”， 关 键 要 看 前 后 的 标签 是 内 联 还 是 块 级 。 








(3) 行 框 盒子 (ine box) 。 例 如 : 





< p> | 这 是 一 行 普 通 的 文字 ， 这 里 有 个 《 em>em< /em> 标签 。 











< /p> 








一 行 就 是 一 个 “ 行 框 盒子 ”〈 实 线 框 标注 ) ， 每 个 “ 行 框 例子 ”又 是 由 
一 个 “内 联 盒子 ?组 成 的 。 


> 牺 


| 


(4) 包含 盒子 (containing box) 。 例 如 : 








<p> 标签 就 是 一 个 “包含 盒子 ”( 实 线 框 标注 ) ， 此 盒子 由 一 行 一 行 
的 “ 行 框 盒子 ?组 成 。 

需要 补充 说 明 一 点 ， 在 CSS 规 范 中 ， 并 没有 “包含 盒子 ”的 说 法 ， 更 
准确 的 称呼 应 该 是 “包含 块 ”(containing block) 。 这 里 之 所 以 把 它 称 为 
子 ， 一 是 为 了 与 其 他 盒子 名 称 统一 ， 二 是 称 为 盒子 更 形象 、 更 容易 理 


演 如 





3.4.3 ”幽灵 空白 节点 








“幽灵 空白 节点 ?是 内 联合 模型 中 非常 重要 的 一 个 概念 ， 有 具体 指 的 
是 : 在 HIML5 文 档 声明 中 ， 内 联 元 素 的 所 有 解析 和 演 染 表现 就 如 同 每 
个 行 框 盒 子 的 前 面 有 一 个 “空白 节点 "一样 。 这 个 “空白 节操 ?永远 透明 ， 
不 占据 任何 宽度 ， 看 不 见 也 无 法 通过 脚本 获取 ， 就 好 像 幽灵 一 样 ， 但 又 
确 确 实 实地 存在 ， 表 现 如 同文 本 节 扣 一 样 ， 因 此 ， 我 称 之 为 “幽灵 空 











em 39 
i 9 


注意 ， 这 里 有 一 个 前 提 ， 文 档 声 明 必 须 是 HTML5 文 档 声 明 (HTML 
代码 如 下 ) ， 如 果 还 是 很 多 年 前 的 老 声明 ， 则 不 存在 “幽灵 空白 节点 ”。 


<ldoctype html> 
<html> 


我 们 可 以 举 一 个 最 简单 的 例子 证 明 “ 幽 灵 空 白 节点 ”确实 存在 ， CSS 
和 HTML 代 人 码 如 下 : 





div { 

background-color: #cd66060; 
} 
span { 


} 


<div><span></span></div> 


display: inline-block; 








结果 ， 此 <div> 的 高 度 并 不 是 6 ， 而 是 如 图 3-29 所 示 有 高 度 。 


1984 x 18 


[x 上 | Elements 


html 


图 3-29 ”高 度 不 为 8 证 明 幽 灵 空 白 节 点 的 存在 〈 截 自 Chrome 浏 览 器 ) 








这 看 实 很 奇怪 ， 内 部 的 <span> 元 系 的 宽 高 明明 都 是 8 ， 标 签 之 间 
也 没有 换行 符 之 类 的 嫌疑 ， 怎 么 cdiv> 的 高 度 会 是 图 3-29 中 所 示 的 18 像 
素 呢 ? 





作 尝 的 就 是 这 里 的 "幽灵 空 白 节点 "， 如 果 我 们 认为 在 cspany 元 素 
的 前 面 还 有 一 个 宽度 为 6 的 空白 字符 ， 是 不 是 一 切 就 解释 得 通 呢 ? 








当然 ， 为 何 高 度 是 18 像 素 这 里 三 言 两 语 是 解释 不 清 的 ， 可 以 看 后 
面 对 line-height 和 vertical-align 的 深入 讲解 ， 这 里 只 是 为 了 证 
明 “* 幽 灵 空 白 节 点 ”确实 是 存在 的 。 








里 然 说 “幽灵 空白 节点 ”是 我 目 己 根据 CSS 的 特性 表现 起 的 一 个 非常 
形象 的 名 字 ， 但 其 绝 不 是 空中 楼 阁 、 信 口 胡说 的 。 规 范 中 实际 上 对 这 
个 “幽灵 空白 节点 ?是 有 提 及 的 , “幽灵 空白 节点 ”实际 上 也 是 一 个 盒子 ， 
不 过 是 个 假想 盒 ， 名 叫 “strut”， 中 文 直译 为 " 文 柱 ”， 是 一 个 存在 于 每 
个 “ 行 框 盒子 前面， 同时 具有 该 元 系 的 字体 和 行 高 属性 的 0 宽度 的 内 联 
盒 。 规 范 中 的 原文 如 下 : 














Each line box starts with a zero-width inline box with the element’s font and 


line height properties. We call that imaginary box a “strut”. 








明白 “ 同 灵 空白 节点 ”的 存在 是 理解 后 续 很 多 内 联 元 系 为 何 会 这 么 表 
现 的 基础 。 





[1] “外 在 盒子 ”除了 inline- block ， 还 有 run-in ， 但 Chrome 已 经 


放弃 对 run-in 的 支持 有 一 段 时 间 了 ， 因 此， 本 书 不 对 其 做 分 析 。 


盒 尺 寸 中 的 4 个 盒子 content box、padding box、border box 和 margin 
box 分 别 对 应 CSS 世 界 中 的 content 、padding 、border 和 margin 属 
性 ， 我 把 这 4 个 属性 称 为 “使 尺寸 四 大 家 族 ”， 下 面 我 们 一 个 一 个 揭 开 “四 
大 家 族 ” 鲜 为 人 知 的 一 面 。 


4.1 深入 理解 content 


4.1.1 content 与 蔡 换 元 素 
1. 什么 是 蔡 换 元 了 素 


蔡 换 元 素 (replaced element) 可 以 说 是 CSS 世 界 中 的 男 外 一 个 派 
系 。 





根据 “外 在 盒子 ”是 内 联 还 是 块 级 我 们 可 以 把 元 系 分 为 内 联 元 素 和 块 
级 元 素 ， 而 根据 是 否 具 有 可 亚 换 内 容 ， 我 们 也 可 以 把 元 素 分 为 蔡 换 元 和 素 
和 非 蔡 换 元 系 。 那 什么 是 蔡 换 元 系 呢 ? 














蔡 换 元 素 ， 顾 名 思 义 ， 内 容 可 以 被 替换 。 举 个 典型 的 例子 : 


<img src="1.jpg"> 


如 果 我 们 把 上 面 的 1.jpg 换 成 2.jpg ， 是 不 是 图 片 束 会 蔡 换 了 ? 





这 种 通过 修改 某 个 属性 值 呈 现 的 内 容 就 可 以 被 蔡 换 的 元 素 就 称 
为 “替换 元 素 "。 因 此 ，<img> 、<object> 、<video> 、<iframey 或 
者 表单 元 素 <textarea> 和 <input> 都 是 典型 的 替换 元 素 。 


答 换 元 素 除 了 内 容 可 答 换 这 一 特性 以 外 ， 还 有 以 下 一 些 特性 。 


(1) 内 容 的 外 观 不 受 页 面 上 的 CSS 的 影响 。 用 专业 的 话 讲 就 是 在 
样式 表现 在 CSS 作 用 域 之 外 。 如 何 更 改善 换 元 素 本 吴 的 外 观 ? 需要 类 
似 appearance 属性 ， 或 者 浏览 右 目 身 暴露 的 一 些 样式 接口 ， 例 如 : : - 
ms-check{} 可 以 更 改 高 版 本 I 浏览 器 下 单 复 选 框 的 内 间距 、 背 景色 等 
样式 ， 但 是 直接 input[type='checkbox']{} 却 无 法 更 改 内 间距 、 背 
景色 等 样式 。 


(2) 有 自己 的 尺寸 。 在 web 中 ， 很 多 蔡 换 元 素 在 没有 明确 尺寸 设 
定 的 情况 下 ， 其 默认 的 尺寸 〈 不 包括 边框 ) 是 300 像 素 x150 像 素 ， 如 
<video> 、<iframe> 或 者 ccanvas> 等 ， 也 有 少 部 分 替换 元 素 为 0 像素 ， 
如 <img> 图 片 ， 而 表单 元 和 素 的 蔡 换 元 又 的 尺寸 则 和 浏览 器 有 关 ， 没 有 明 
显 的 规律 。 














(3) 在 很 多 CSS 属 性 上 有 自己 的 一 套 表现 规则 。 比 较 具 有 代表 性 
的 就 是 vertical-align 属性 ， 对 于 蔡 换 元 系 和 非 蔡 换 元 
素 ，vertical-align 属性 值 的 解释 是 不 一 样 的 。 比 方 说 vertical- 
align 的 默认 值 的 baseline ， 很 简单 的 属性 值 ， 基 线 之 意 ， 被 定义 为 
字符 X 的 下 边缘 ， 在 西方 语言 体系 里 近乎 和 常识， 几乎 无 人 不 知 ， 但 是 到 
了 蔡 换 元 又 那 里 就 不 适用 了 。 为 什么 呢 ? 因为 蔡 换 元 素 的 内 容 往往 不 可 
能 含有 字符 x， 于 是 蔡 换 元 素 的 基线 就 被 硬 生生 定义 成 了 元 素 的 下 边 











缘 。 





下 面 提 个 简单 问题 ， 下 拉 框 <select> 是 不 是 蔡 换 元 素 ? 答案 : 是 
的 。 

我 们 可 以 对 照 一 下 “替换 元 素 ” 的 一 些 特点 : 首先 ， 内 容 可 蔡 换 ， 例 
如 我 们 设置 multiple 属性 ， 下 拉 直 接 变 成 了 展开 的 直选 多 选 模式 ; 其 
次 ， 基 本 样式 外 部 CSS 很 难 改变 ; 最 后 ， 它 有 上 自己 的 尺寸 ， 基 线 也 是 下 


2. 和 葵 换 元 素 的 称 认 display 值 














所 有 的 蔡 换 元 素 都 是 内 联 水 平 元 素 ， 也 就 是 蔡 换 元 素 和 替换 元 素 、 
蔡 换 元 素 和 文字 都 是 可 以 在 一 行 显示 的 。 但 是 ， 蔡 换 元 素 默 认 的 
display 值 却 是 不 一 样 的 ， 见 表 4-1。 


表 4-1 各 个 替换 元 素 的 默认 display 属性 值 


i 机 











inline-block inline-block inline-block 





<input> inline-block inline inline-block 


range|file <input> inline-block inline-block inline-block 
-i 


<button> inline-block inline-block inline-block 
<textarea> inline-block inline-block 


过 对 比 发 现 ，IE 浏 览 器 和 Chrome 浏 览 器 的 返回 值 都 是 一 样 的 ， 但 
ni 览 喜 在 <textarea> 和 绝 大 多 数 类 型 的 <input> 元 素 上 却 是 
返回 的 inline 而 不 是 inline-block ， 这 其 实 是 一 个 很 奇怪 也 很 有 意 

思 的 现象 。 为 什么 说 奇怪 呢 ? 我 们 都 知道 下 面 两 种 按钮 元 兹 的 表示 方法 
尺寸 长 相 是 模 一 样 的 : 











<input type="button"” value=" 按 钮 "> 


<button type="button"> 按 钮 </button> 





但 是 在 Firefox 下 ， 前 者 的 display 属性 默认 值 是 inline ， 后 者 却 
是 inline-block ， 很 自然 会 奇怪 明明 一 个 模子 里 出 来 的 ， 怎 么 会 有 这 
个 区 别 呢 ? 





实际 上 ， 如 果 我 们 深入 探究 束 会 发 现 ， 似 乎 Firefox 浏 览 噩 在 蔡 换 元 
素 的 内 联 表 现 这 一 块 还 是 有 些 自己 的 想法 的 。 


首先 回答 一 下 这 个 疑问 : <input> 和 <button> 按钮 的 区 别 在 什么 


地 方 ? 区 别 在 于 两 种 按钮 默认 的 white-space 值 不 一 样 ， 前 者 是 pre 
， 后 者 是 normal ， 所 表示 出 来 的 ”现象 差异 就 是 : 当 按 钮 文字 足够 
多 的 时 候 ，<input> 按钮 不 会 自动 换行 ，<button> 按钮 则 会 。 


当然 ， 这 并 不 是 Firefox 浏 览 器 下 两 种 按钮 默认 display 值 不 一 样 的 
原因 ， 那 究竟 是 什么 原因 呢 ? 我 仔细 对 比 了 一 下 ， 发 现 没 有 规律 可 言 ， 
原因 芍 怕 只 有 浏览 器 厂商 自己 才 知 道 了 。 当 然 ， 抛 出 此 问题 的 目的 不 是 
得 出 这 里 略 显 敷 生 的 答案 ， 而 是 为 了 引出 下 面 的 重要 内 容 ， 也 就 是 : 我 
们 没有 必要 深究 为 什么 一 个 是 inline 一 个 是 inline-block ， 因 为 对 
于 蔡 换 元 素 而 言 ， 这 是 没有 意义 的 。 为 什么 这 么 说 昵 ? 蔡 换 元 素 有 很 多 
表现 规则 和 非 殖 换 元 系 不 一 样 ， 其 中 之 一 是 宽度 和 高 度 的 尺寸 计算 规 
则 ， 简 单 摘 述 一 下 就 是 ， 蔡 换 元 素 的 display 是 inline 、block 和 
inline-block 中 的 任意 一 个 ， 其 尺寸 计算 规则 都 是 一 样 的 。 


3. 和 葵 换 元 系 的 矿 寸 计算 规则 


我 个 人 将 蔡 换 元 素 的 尺寸 从 内 而 外 分 为 3 类 : 固有 尺寸 、HIML 尺 
寸 和 CSS 尺 寸 。 











(1) 固有 尺寸 指 的 是 蔡 换 内 容 原 本 的 尺寸 。 例 如 ， 图 片 、 视 频 作 
为 一 个 独立 文件 存在 的 时 候 ， 都 是 有 着 上 自己 的 宽度 和 高 度 的 。 这 个 宽度 
和 高 度 的 大 小 就 是 这 里 的 “固有 尺寸 >。 对 于 表单 类 符 换 元 素 , “固有 尺 
寸 ”" 可 以 理解 为 “不 加 修饰 的 默认 尺寸 "?。 比 方 说 ， 你 在 空白 页 面 写 
上 <input> ， 此 时 的 尺寸 就 可 以 看 成 是 <input> 元 素 的 “固有 尺寸 "。 这 
就 是 输入 框 、 下 拉 框 这 些 表单 元 素 默 认 的 font-size/padding/margin 
等 属性 全 部 使 用 px 作为 单位 的 原因 ， 因 为 这 样 可 以 保证 这 些 元 素 的 “ 固 
有 尺寸 "是 固定 大 小 ， 不 会 受 外 界 CSS 的 影响 。 














(2) HIML 尺 寸 这 个 概念 略微 抽象 ， 我 们 不 妨 将 其 想象 成 水 煮 重 
里 面 的 那 一 层 白色 的 膜 ， 里 面 是 < 固有 尺寸 "这 个 蛋黄 蛋白 ， 外 面 是 “CSS 
尺寸 "这 个 蛋 达 。”“HTML 斥 才 ? 只 能 通过 HTML 原 生 属 性 改变 ， 这 些 
HTML 原 生 属性 包括 <img> 的 width 和 height 属性 、<input> 的 size 
属性 、<textarea> 的 cols 和 rows 属性 等 。 








<img width="366”height="166"> 
<input type="file" size="30"> 


<textarea cols="206" rows="5></textarea> 





(3) CSS 尺 寸 特 指 可 以 通过 CSS 的 width 和 height 或 者 max- 
width/min-width 和 max-height/min-height 设置 的 尺寸 ， 对 应 盒 尺 
寸 中 的 content box。 


可 以 影响 丛 换 元 素 尺 寸 的 3 层 结构 如 图 4-1 所 示 。 这 3 层 结 构 的 计算 
规则 具体 如 下 。 


Fr-------” 
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图 4-1 替换 元 素 的 3 层 尺 寸 结构 示意 








。 如 果 没 有 CSS 尺 寸 和 HTML 尺 寸 ， 则 使 用 固有 尺寸 作为 最 终 的 宽 


高 。 例 如 ， 下 和 面 的 HTML 代 码 : 


<img src="1.jpg"> 


假设 1.jpg 这 张 图 片 原 尺寸 是 256 x 192， 则 在 页 面 中 此 图 所 呈现 的 
宽 高 就 是 256 像 素 x192 像 素 。 





。 如 果 没 有 CSS 尺 寸 ， 则 使 用 HTML 尺 寸 作 为 最 终 的 宽 高 。 仍 以 图 片 
举例 : 


<img src="1.jpg" width="128" height="96"> 





我 们 通过 HTML 属性 width 和 height 限定 了 图 片 的 HTML 尺 寸 ， 
因此 ， 最 终 图 片 所 呈现 的 宽 高 就 是 128 像 素 x96 像 素 。 


e。 如 果 有 CSS 尺 寸 ， 则 最 终 尺 寸 由 CSS 属 性 决定 。 我 们 继续 上 面 的 例 
3 


img { width: 266px; height: 156px; } 


<img src="1.jpg" width="128" height="96"> 





此 时 加 有 尺寸 、HTML 尺 寸 和 CSS 尺 寸 同 时 存在 ， 起 作用 的 是 CSS 
属性 限定 的 尺寸 ， 因 此 ， 最 终 图 片 所 呈现 的 宽 高 就 是 200 像 素 x150 像 





。 如果“ 固有 尺寸 ”含有 固有 的 宽 高 比例 ， 同 时 仅 设 置 了 宽度 或 仅 设置 
了 高 度 ， 则 元 素 依 然 按 照 固有 的 宽 高 比例 显示 。 我 们 还 是 拿 图 片 举 
例 ， 例 如 ， 下 面 的 CSS 和 HTML 代 码 : 


img { width: 266pxj } 
<img src="1.jpg"> 





虽然 CSS 中 仅仅 设置 了 width ， 但 图 片 这 种 蔡 换 元 素 的 资源 本 身 具 
有 特定 的 宽 高 比例 ， 因 此 ，height 也 会 等 比例 计算 。 所 以 ， 最 终 图 片 
所 呈现 的 宽 高 就 是 200 像 素 x150 像 素 (150 = 200 x192/256) 。 





如 果 本 例子 仅 设 置 height:156px ， 最 后 的 结果 也 是 这 样子 。 





。 如 采 上 面 的 条 件 都 不 符合 ， 则 最 终 宽 上 度 表 现 为 300 像 素 ， 高 度 为 150 
像 系 ， 宽 高 比 2:1。 例 如 : 


<video></video> 


在 所 有 现代 浏览 器 下 的 尺寸 表现 都 是 300 像 素 x150 像 素 。 





。 内 联 蔡 换 元 素 和 块 级 蔡 换 元 素 使 用 上 面 同 一 套 尺 寸 计算 规则 。 例 
如 : 


img { display: block; } 
<img src="1.jpg"> 








虽然 图 片 此 时 变 成 了 块 级 ， 但 是 尺寸 规则 还 是 和 内 联 状 态 下 一 致 ， 
因此 ， 图 片 呈 现 的 宽 高 还 是 256 像 素 x192 像 素 。 这 也 是 为 何 图 片 以 及 其 
他 表单 类 替换 元 素 设置 display:block 宽度 却 没有 100% 容 器 的 原因 。 











如 果 单 看 规则 ， 似 乎 面面俱到 ， 无 懈 可 击 。 但 是 ， 实 际 上 ， 意 外 还 
是 发 生 了 ， 这 个 意外 就 是 最 常用 的 <img> 元 素 。 如 果 任 何 尺 寸 都 没有 ， 





则 元 素 应 该 是 300 像 素 x150 像 素 ， 这 条 规则 <video> 、<canvas> 和 
<iframe> 这 些 元 素 都 符合 ， 唯 独 图 片 例 外 。 如 下 : 


<img> 


这 段 HIML 表 示 一 个 没有 蔡 换 内 容 也 没有 尺寸 设 定 的 裸露 的 <img> 
元 素 。 按 照 规范 尺寸 应 该 是 300 像 素 x 150 像 素 ， 结 果 不 仅 不 是 这 个 尺 
寸 ， 而 且 各 个 浏览 器 下 的 尺寸 还 不 一 样 。 正 浏览 器 下 是 28x30， 如 图 4-2 
所 示 。Chrome 浏 览 器 下 是 0x0， 如 图 4-3 所 示 。Firefox 浏 览 器 下 显示 的 是 
0x22， 如 图 4-4 所 示 。 








图 4-2 ”了 正 浏 览 器 图 片 默认 尺寸 





图 4-3 Chrome 浏览 器 图 片 默 认 尺 寸 





图 4-4 Firefox 浏 览 器 图 片 默认 尺寸 


其 实 尺 寸 不 一 样 不 打 紧 ， 因 为 我 们 平时 使 用 都 会 设置 人 寸 ， 不 可 能 
像 这 样 放 任 不 管 ， 但 是 ， 如 果 表 现 型 也 不 一 样 ， 那 束 抹 烦 了 。 我 们 从 一 
个 第 用 功能 的 前 并 小 技巧 说 起 。 





Web 开 发 的 时 候 ， 为 了 提高 加 载 性 能 以 及 节约 带宽 费用 ， 首 屏 以 下 
的 图 片 就 会 通过 滚屏 加 载 的 方式 异步 加 载 ， 然 后 ， 这 个 即将 被 异步 加 载 
的 图 片 为 了 布局 稳健 、 体 验 良 好 ， 往 往 会 使 用 一 张 透 明 的 图 片 占 位 。 例 
如 : 


<img src="transparent.png"> 


实际 上 ， 这 个 透明 的 占 位 图 片 也 是 多 余 的 资源 ， 我 们 直接 : 


然后 配合 下 面 的 CSS 可 以 实现 一 样 的 效果 : 


img { visibility: hidden; } 


img[src] { visibility: visible; } 





注意 ， 这 里 的 <img> 直接 没有 src 属性 ， 再 强调 一 遍 ， 是 直接 没 
有 ， 不 是 src="" ，src="" 在 很 多 浏览 器 下 依然 会 有 请 求 ， 而 且 请 求 的 
是 当前 页 面 数据 。 当 图 片 的 src 属性 缺 省 的 时 候 ， 图 片 不 会 有 任何 请 
， 是 最 高 效 的 实现 方式 。 





尘 


理论 再 次 无 懈 可 击 ， 然 而 ， 正 如 之 前 提 到 的 , “似乎 Firefox 浏 览 器 
在 蔡 换 元 素 的 内 联 表 现 这 一 块 还 是 有 些 自己 的 想法 的 ”。 对 于 Firefox 浏 
览 句 ，src 缺 省 的 <img> 不 是 蔡 换 元 素 ， 而 是 一 个 普通 的 内 联 元 素 ， 所 
以 使 用 的 就 不 是 蔡 换 元 素 的 尺寸 规则 ， 而 是 类 似 <span> 的 内 联 元 素 尺 
寸 规 则 ， 宽 高 会 无 效 。 因 此 : 


img { width: 266px; height: 156px; } 
<img> 


在 IE 和 Chrome 浏 览 器 下 都 按照 预期 图 片 尺 寸 200 像 素 x150 像 素 ， 但 
是 ，Firefox 浏 览 器 却 纹 丝 不 动 ， 依 然 是 默认 图 片 尺寸 ， 这 就 比较 尴 认 
了 ， 好 在 要 修复 此 兼容 性 问题 很 简单 ， 只 需 直 接 设 置 : 


img { display: inline-block; } 


an 标签 设置 display:inline-block 后 可 以 设置 宽 
高 束 可 以 了 。 这 个 针对 Firefox 浏 览 占 的 修复 既 有 效 ， 又 对 其 他 浏览 器 的 
图 片 表现 没有 任何 影响 ， 因 此 ， 我 建议 在 CSS 重 置 的 时 候 加 上 下 面 这 


行 : 
img { display: inline-block; } 














接 下 来 ， 我 们 继续 深入 珍 换 元 素 的 尺寸 规则 。 


CSS 世 界 中 的 奉 换 元 系 的 固有 尺寸 有 一 个 很 重要 的 特性 ， 那 就 
是 “我 们 是 无 法 改变 这 个 蔡 换 元 素 内 容 的 固有 尺寸 的 ”。 














我 们 平常 打交道 的 图 片 的 尺寸 规则 是 “默认 的 宽 高 设置 会 履 善 固有 
尺寸 "， 因 此 ， 我 们 可 能 会 误 认 为 我 们 的 宽 高 设置 修改 的 是 图 片 的 回 有 
尺寸 ， 实 际 上 并 不 是 。 要 证 明 这 一 观点 ， 我 们 可 以 借助 非 蔡 换 元 率 
的 : :before 或 ::after 伪 元 素 。 例 如 ， 如 果 有 下 面 的 代码 : 
div:before { 


content: url(1.jpg); 
display: block; 


width: 2660pxj height: 266pX; 


} 











此 时 : :before 伪 元 素 呈 现 的 图 片 的 宽 高 是 多 少 ? 


很 多 人 会 按照 经 验 认为 是 200 像 素 x200 像 素 ， 非 也 ! 实际 上 ， 这 里 
的 图 片 尺 寸 是 1.jpg 这 张 图 片 的 原始 尺寸 大 小 256 像 素 x192 像 
素 ，width 和 height 属性 都 被 直接 无 视 了 。 这 就 是 我 上 面 所 说 的 ， 在 
CSS 世 界 中 ， 图 片 资源 的 固有 尺寸 是 无 法 改变 的 ! 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-1.php 或 者 扫 右 侧 的 
二 维 码 。 








可 以 看 到 图 片 是 按照 原始 尺寸 展示 的 《如 图 4-5 所 示 ) ， 并 不 是 CSS 
设 定 的 200 像 素 x200 像 素 ，200 像 素 仪 仅 是 设 定 了 content box 尺 寸 ， 对 
content 生成 图 片 资源 并 没有 任何 影响 。 





我 们 再 回 到 <img> 元 素 ， 既 然 图 片 的 固定 尺寸 不 受 CSS 宽 高 控制 ， 
那 为 何 我 们 设 定 width 和 height 会 影响 图 片 的 尺寸 呢 ? 


我 束 不 卖 关 子 了 ， 那 是 因为 图 片 中 的 content 蔡 换 内 容 默 认 的 适 配 
方式 是 填充 〈fil1 ) ， 也 就 是 外 部 设 定 的 尺寸 多 大 ， 我 就 填 满 、 跟 着 
一 样 大 。 换 名 话说 ， 尺 十 变化 的 本 质 并 不 是 改变 固有 尺寸 ， 而 是 采用 了 
填充 作为 适 配 HIML 尺 寸 和 CSS 尺 寸 的 方式 ， 且 在 CSS3 之 前 ， 此 适 配 方 
式 是 不 能 修改 的 。 








在 CSS3 新 世界 中 ，<img> 和 其 他 一 些 蔡 换 元 素 的 蔡 换 内 容 的 适 配 
方式 可 以 通过 object-fit 属性 修改 了 。 例 如 ，<img> 元 素 的 默认 声明 
是 object-fit:fill ， 如 果 我 们 设置 object-fit:none ， 则 我 们 图 片 


的 尺寸 就 完全 不 受 控 制 ， 表 现 会 和 非 蔡 换 元 素 : :before 生成 的 图 片 尺 
寸 类 似 ; 如 果 我 们 设置 object-fit:contain ， 则 图 片 会 以 保持 比例 图 
片 ， 尽 可 能 利用 HIML 尺 寸 但 又 不 会 超出 的 方式 显示 ， 有 些 类 似 于 
background-size:contain 的 呈现 原理 ， 如 果 此 时 我 们 设 定 <img> 元 
素 的 width 和 height 都 是 200 像 素 ， 则 会 呈现 图 4-6 所 示 的 自动 垂直 居 
中 效果 。 








图 4-5 content 生成 的 图 片 宽 高 设置 无 效 





图 4-6 ”object-fit:contain 下 的 图 片 效果 


object-fit 还 有 其 他 一 些 属性 值 ， 但 本 书 不 会 展开 介绍 CSS3 内 
容 ， 因 此 点 到 为 止 ， 有 兴趣 的 读者 可 以 读 我 的 博客 文 


章 : http:/www.zhangxinxu.com/wordpress/?p=4676 。 








4. 答 换 元 素 和 非 答 换 元 素 的 距离 有 多 远 


图 片 可 以 说 是 最 典型 最 闻 用 的 苦 换 元 素 卫 ， 因 此 ， 本 节 依 然 以 图 片 
为 代表 来 深入 答 换 元 素 的 “内 心 世 界 ”。 


仙 侠 小 说 世界 中 有 正道 和 魔道 ， 看 似 势 不 两 立 ， 但 其 实 并 无 本 质 差 
别 ， 稍 不 留神 可 能 就 会 变 成 魔道 中 人 。CSS 世 界 中 的 答 换 元 系 和 非 玲 换 
元 素 看 上 去 也 是 两 个 对 立 的 派别 ， 立 场 清晰 ， 区 分 明显 ， 老 死 不 相 往 来 
的 感觉 但是， 一旦 深入 研究 我 们 就 会 及 现 ， 两 者 之 间 的 距离 要 比 我 们 
所 有 人 想象 得 都 要 近 ! 





观点 1 : 瑟 换 元 素 和 非 蔡 换 元 素 之 间 只 隔 了 一 个 src 属 性 ! 


由 于 我 们 平时 使 用 图 片 肯 定 都 会 使 用 src 属性 ， 所 以 难免 会 思维 定 
式 ， 认 为 <img> 等 同 于 图 片 ， 实 际 上 完全 不 是 的 。 如 果 我 们 把 src 属性 
去 挥 ，<img> 其 实 就 是 一 个 和 <span> 类 似 的 普通 的 内 联 标签 ， 也 就 是 
成 了 一 个 非 蔡 换 元 素 。 


非常 有 想法 的 Firefox 浏 览 器 很 好 地 证 实 了 这 一 点 。 例 如 ， 对 于 以 下 
CSS 和 HTML 人 代码， 最 后 图 片 宽 度 是 多 少 ? 








img { 
display: block 
outline: 1px solid; 


} 


<img> 








按照 蔡 换 元 素 的 尺寸 规则 ， 宽 度 凡 该 是 9 ， 但 实际 上 ， 在 Firefox 浏 
览 圳 下， 最 终 的 宽度 是 100% 目 适应 父 one 其 表现 和 普 


通 的 <spany> 类 似 ， 已 经 完全 不 是 蔡 换 元 素 了 。 大 家 应 该 都 知 
道 ，<span> 标签 设置 width 和 height 是 无 效 的 ， 所 以 大 家 应 该 明白 为 何 
Firefox 浏 览 嚣 下 <img> 设置 width 和 height 不 起 作用 了 吧 。 


Firefox 浏 览 器 的 案例 很 好 地 证 明了 “如 果 图 片 没 有 蔡 换 内 容 ， 图 片 
就 是 一 个 普通 的 内 联 标 签 ”。 








Chrome 浏 览 嚣 其实 也 有 类 似 的 表现 ， 只 是 需要 特定 的 条 件 触 发 而 
这 个 触发 条 件 就 是 需要 有 不 为 空 的 alt 属性 值 。 例 如 : 





<img alt=" 任 意 值 "> 





此 时 ，Chrome 这 个 <img> 宽度 也 是 100% 容 器 。 假 设 我 们 容器 宽度 470 像 
素 ， 则 效果 就 是 图 4-7 所 示 的 样子 。 完 全 就 是 非 蔡 换 元 素 的 表现 吧 。 


但 是 ， 如 果真 是 这 样 ， 那 为 何 正 浏览 器 没有 src 属性 还 是 完全 的 蔡 
换 元 素 表 现 呢 ? 原因 就 在 于 正 浏 览 器 中 有 个 默认 的 占 位 替换 内 容 ， 
当 src 属性 缺失 的 时 候 ， 会 使 用 这 个 默认 的 占 位 内 容 ， 这 也 是 下 浏览 器 
下 默认 <img> ee 
在 。 在 高 版 本 的 下 浏览 器 下 ， 这 个 占 位 的 蔡 换 内 容 似 乎 做 了 透明 处 理 ， 
但 是 ， 在 原生 的 IE8 浏 i 这 个 占 位 内 容 却 全 然 暴 露 了 ， 见 图 4-8。 


图 4-7 容器 宽度 470 像 素 的 效果 

















图 4-8 ”IE 浏览 器 <img> 占 位 内 容 


大 家 仔细 观察 会 发 现 此 占 位 内 容 中 那个 图 片 的 小 图 标 古 完整 的 ， 不 
是 图 片 src 不 合法 出 现 的 破 神 小 图 标 或 者 带 叉 号 的 图 标 ， 需 要 注意 区 
别 ， 别 混 消 了 。 


另外 一 个 可 以 很 好 证 明 “ 蔡 换 元 素 和 非 蔡 换 元 兹 区 别 就 在 于 src 属 
性 ”的 点 是 “基于 伪 元 素 的 图 片 内 容 生 成 技术 ”。 用 一 句 更 易 懂 的 话 描述 
就 是 ， 我 们 可 以 对 <img> 元 素 使 用 : :before 和 : :after 伪 元 素 进 行内 
容 生成 以 及 样式 构建 ， 但 是 这 种 方法 文 持 是 有 限制 的 。 首 先是 兼容 性 问 
题 ， 根 据 我 的 测试 ， 目 前 Chrome 和 Firefox 等 浏览 器 支持 ， 但 下 浏览 器 不 
支持 ;其 次 ， 要 想 让 Chrome 或 Firefox 等 浏览 器 生效 ， 还 有 其 他 一 些 需 要 
注意 的 技术 点 。 














(1) 不 能 有 src 属性 (证 明 观 点 的 关键 所 在 〉; 
(2) 不 能 使 用 content 属性 生成 图 片 ( 针 对 Chrome) ; 
(3) 需要 有 alt 属性 并 有 值 〈( 针 对 Chrome); 


(4) Firefox 下: :before 伪 元 素 的 content 值 会 被 无 视 ，: :after 
无 此 问题 ， 应 该 与 Firefox 自 己 占用 了 ::before 伪 元 素 的 content 属性 
有 关 。 





虽然 “基于 伪 元 素 的 图 片 内 容 生 成 技术 ”并 不 属于 实用 技术 ， 但 是 ， 
实际 网 页 开发 的 时 候 ， 会 有 一 些 场景 必须 使 用 <img> 标签 ， 此 时 ， 这 些 
隐蔽 的 技术 往往 就 会 有 神 迹 表现 。 我 这 里 举 个 小 例子 抛砖引玉 一 下 ， 上 
一 小 节 提 到 使 用 缺 省 src 的 <img> 元 素 实现 滚屏 加 载 效果 ， 但 是 ， 就 有 
可 能 存在 这 样 一 个 体验 问题 : 如 果 我 们 的 JavaScript 加 载 比 较 慢 ， 我 们 的 








页 面 就 很 有 可 能 出 现 一 块 一 块 白 色 的 图 片区 域 ， 纯 白色 的 ， 没 有 任何 信 
恩 ， 用 户 完 全 不 知道 这 里 的 内 容 是 什么 。 虽 然 alt 属性 可 以 提供 描述 信 
恩 ， 但 由 于 视觉 效果 不 好 ， 被 隐藏 挥 了 。 此 时 ， 我 们 总 不 免 畅 想 ， 要 是 
在 图 片 还 没 加 载 时 就 把 alt 信息 呈现 出 来 该 多 好 啊 。 





茶 喜 你 可 以 美梦 成 真 ! 办 法 驶 是 使 用 这 里 的 “基于 伪 元 际 的 图 片 内 
容 生 成 技术 ”。 


在 Chrome 或 Firefox 浏 览 右 下 访问 http://demo.cssworld.cn/4/ 1-2.php。 
进入 此 演示 页 面 ， 我 们 鼠标 经 过 中 间 的 色 块 区 域 的 时 候 会 发 现 ， 有 一 个 
带 有 文字 信息 的 半 透 明 黑 色 条 目 出 现 了 ， 如 图 4-9 所 示 。 








R 


图 4-9 alt 信息 美美 地 显示 


此 时 ， 图 片 src 没有 ， 因 此 ，: :before 和 ::after 可 以 生效 ， 我 
们 就 可 以 把 alt 属性 值 通 过 content 属性 呈现 出 来 ， 核 心 CSS 代 码 如 
下 : 





img: :after { 
/* 生成 alt 信 息 */ 
content: attr(alt) 
/* 尺寸 和 定位 */ 
position: absolute; bottom: 6; 
width: 1662%; 


background-color: rgba(0,06,0,.5); 
transform: translateY(166%) ; 
/* 来 点 过 渡 动 画 效果 */ 
transition: transform .2s; 
} 
img:hover::after { 
/* alt 信 息 显 示 */ 
transform: translateY(6) 


} 





下 面 是 此 技术 最 有 意思 的 部 分 。 当 我 们 点 击 按钮 给 图 片 添 加 一 
个 src 地 址 时 ， 图 片 从 普通 元 素 变 成 蔡 换 元 素 ， 原 本 都 还 支持 
的 : :before 和 : :after 此 时 全 部 无 效 ， 此 时 再 hover 图 片 ， 是 不 会 有 
任何 信息 出 现 的 〈 见 图 4-10) 。 于 是 就 非常 巧妙 地 增强 了 图 片 还 没 加 载 
时 的 信息 展示 体验 。 


地 时 无 信 路 尘 现 
从 





移 除 src 属性 


图 4-10 src 属性 存在 时 候 :before/ :after 失效 





细 细 体味 会 发 现 ， 这 一 体验 增强 实现 非常 巧妙 地 利用 了 蔡 换 元 系 的 
各 种 特性 表现 ， 并 且 在 HIML 层 面 并 没有 任何 其 他 代码 或 内 容 的 辅助 ， 
可 谓 是 非常 高 性 价 比 的 技术 实现 ， 大 家 不 妨 在 自己 的 项 目 中 小 试 一 下 。 





观点 2 : 替换 元 素 和 非 蔡 换 元 素 之 间 只 隔 了 一 个 CSS content 属性 


蔡 换 元 素 之 所 以 为 蔡 换 元 素 ， 就 是 因为 其 内 容 可 奉 换 ， 而 这 个 内 容 
就 是 margin 、border 、padding 和 content 这 4 个 盒子 中 的 content 
box， 对 应 的 CSS 属 性 是 content ， 所 以 ， 从 理论 层面 讲 ，content 属 
性 决定 了 是 蔡 换 元 素 还 是 非 瞧 换 元 素 。 


理论 太 虚 ， 我 们 还 是 看 一 些 有 趣 的 真实 案例 吧 。 在 开始 之 前 ， 我 们 
需要 感谢 Chrome 浏 览 器 ，Chrome 浏 览 器 的 泻 染 表 现 帮 助 我 们 更 好 地 理 
解 了 蔡 换 元 素 。 什 么 表现 呢 ? 就 是 在 Chrome 浏 览 器 下 ， 所 有 的 元 陛 都 
文 持 content 属性 ， 而 其 他 浏览 器 仪 在 : :before/::after 伪 元 素 中 才 
有 文 持 。 因 此 ， 下 面 的 所 有 案例 ， 请 在 Chrome、Safari、Opera 等 浏览 器 
下 查看 。 





前 面 已 经 证 明了 ,没有 src 属性 的 <img> 是 非 蔡 换 元 素 ， 但 是 ， 如 
果 我 们 此 时 使 用 content 属性 给 它 生 成 一 张 图 片 呢 ? 


img { content: url(1.jpg); } 
<img> 


结果 和 下 和 面 HTML 的 视觉 效果 一 模 一 样 : 


<img src="1.jpg"> 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-3.php 或 者 扫 下 面 的 
二 维 码 。 结 果 图 片 都 正常 显示 了 ， 如 图 4-11 所 示 ， 且 各 种 表现 都 符合 蔡 
换 元 素 ， 如 尺寸 规则 ， 或 者 不 文 持 : :before/::after 伪 元 素 等 。 





1. 常规 实现 2. content 属 性 实现 


<img src="1.jpg”> <img> 


img:not([src]) { 
content: url(1.jpg); 





图 4-11 content 属性 直接 生成 图 片 演 示 截 图 





另外 还 有 一 点 很 有 意思 ， 如 宁 图 片 原 来 是 有 src 地 址 的 ， 我 们 也 是 
可 以 使 用 content 属性 把 图 片 内 容 给 置换 掉 的 ， 于 是 ， 我 们 就 能 轻松 实 


现 hover 图 片 变 成 妨 外 一 张 图 片 的 效果 。 例 如 : 


<img src="laugh.png"> 
img:hover { 


content: url(laugh-tear.png); 
} 





实例 可 以 手动 输入 http://demo.cssworld.cn/4/1-4.php 或 者 扫 下 面 的 二 
维 码 访问 。 该 实例 中 ， 我 们 鼠标 经 过 笑脸 ， 笑 脸 会 飙 出 眼泪 《〈 见 图 4- 
12) ， 束 是 通过 CSS 的 content 属性 直接 蔡 换 <img> 的 奉 换 内 容 实现 
的 。 要 是 放 在 以 前 ， 我 们 只 能 借助 background-image 或 者 两 个 <ijmg> 
元 素 显 隐 控 制 实 现 。 








图 4-12 ”鼠标 经 过 变 成 笑 泪 图 片 








然后 ， 还 有 一 点 有 必要 说 明 一 下 ，content 属性 改变 的 仅仅 是 视觉 
呈现 ， 当 我 们 以 右键 或 其 他 形式 保存 这 张 图 片 的 时 候 ， 所 保存 的 还 是 原 
来 src 对 应 的 图 片 。 


不 仅 如 此 ， 使 用 content 属性 ， 我 们 还 可 以 让 普通 标签 元 素 变 成 丛 
换 元 素 。 举 个 例子 ， 宣 网 的 标志 往往 都 会 使 用 <h1> 标签 ， 里 面 会 有 网 
站 名 称 和 标志 图 片 使 用 背景 图 ， 类 似 下 面 的 代码 : 





<h1> 《CSS 世 界 》</h1> 
h1 { 
width: 186pX; 
height: 36pX; 





background: url(logo.png); 
/* 隐藏 文字 */ 
text-indent: -999px; 





下 面 展示 一 个 创新 的 方法 ， 大 家 可 以 在 移动 端 试 试 。 还 是 一 样 的 
HTML 代 码 ， 但 是 CSS 代 码 微调 了 一 下 : 





hi { 
content: url(logo.png); 
} 


没 错 ， 只 要 一 行 CSS 就 可 以 实现 我 们 想 要 的 效果 了 。 为 了 证 明 我 不 
是 在 打 广 语 ， 我 特意 制作 了 演示 页 面 ， 可 以 手动 输入 
http:/demo.cssworld.cn/4/1-5.php 或 者 扫 下 面 的 二 维 码 。 效 果 如 网 4-13 所 
示 ， 可 以 看 到 没有 文字 ， 只 有 图 片 。 








《Css 世界 》 


图 4-13 ”content 轻 松 实现 文字 变 图 片 











我 们 简单 分 析 一 下 : 传统 CSS 代 码 的 <h1> 是 一 个 普通 元 素 ， 因 此 
需要 设 定 尺 寸 隐 藏 文字 ; 但是， 后面 使 用 content 属性 实现 ，<h1> 分 
分 钟 束 变 成 了 答 换 元 素 ， 文 字 目 动 航 答 换 ， 同 时 矿 才 规则 就 是 蔡 换 元 素 
的 尺寸 规则 ， 完 美 适 应 原始 图 片 大 小 。 








此 外 ， 昌 然 视 觉 上 文字 被 蔡 换 了 ， 但 是 屏幕 阅读 设备 阅读 的 还 是 文 
字 内 容 ， 搜 索引 擎 SEO 抓 取 的 还 是 原始 的 文本 信息 ， 因 此 ， 对 页 面 的 可 
访问 性 等 没有 任何 影响 。 看 起 来 这 是 一 个 完美 的 文字 换 图 显示 方案 ， 但 
还 是 有 一 些 局 限 。 前 文 也 说 到 了 ， 蔡 换 元 素 的 固有 尺寸 是 无 法 设置 的 ， 
如 今 在 移动 端 retina 屏 幕 几乎 是 标 配 ， 为 了 图 片 显示 细腻 ， 往 往 真实 图 
片 尺寸 是 显示 图 片 尺寸 的 两 倍 。 于 是 问题 就 来 了 ， 使 用 content 生成 图 
片 ， 我 们 是 无 法 设置 图 片 的 尺寸 的 ， 只 能 迫不得已 使 用 一 倍 图 ， 然 后 导 
致 图 片 看 上 去 有 点 儿 模糊 。 












































所 以 ， 要 想 在 移动 端 使 用 该 技术 ， 建 议 使 用 SVG 矢量 图 片 。 例 如 : 


hi { 
content: url(logo.svg); 


} 





好 了 ， 最 后 和 标题 再 呼应 下 ， 丛 换 元 系 和 非 蔡 换 元 素 的 距离 有 多 


远 ? 就 是 src 或 content 那 一 点 。 


5. content 与 蔡 换 元 素 关 系 痢 析 











从 前 一 节 大 家 一 定 早 就 看 出 content 属性 和 替换 元 素 之 间 有 着 非常 
微妙 的 联系 了 。 实 际 上 ， 在 CSS 世 界 中 ， 我 们 把 content 属性 生成 的 对 
象 称 为 “匿名 蔡 换 元 素 ”(anonymous replaced element) 。 看 到 没 ， 直 接 
就 “ 珍 换 元 素 * 叫 起 来 了 ， 可 见 ， 它 们 之 间 的 联系 并 不 是 微妙 ， 而 是 赤裸 
裸 。 

content 属性 生成 的 内 容 都 是 殖 换 元 系 ? 没 错 ， 了 天 是 蔡 换 元 素 ! 


也 正 是 这 个 原因 ，content 属性 生成 的 内 容 和 普通 元 素 内 容 才 会 有 
很 多 不 同 的 特性 表现 。 我 这 里 举 几 个 简单 的 例子 。 


(1) 我 们 使 用 content 生成 的 文本 是 无 法 选中 、 无 法 复制 的 ， 好 
像 设置 了 user- selectinone 声 明 一 般 ， 但 是 普通 元 又 的 文本 却 可 以 被 轻 
松 选中 。 同 时 ，content 生成 的 文本 无 法 被 屏幕 阅读 设备 读 取 ， 也 无 法 
被 搜索 引 苟 抓 取 ， 因 此 ， 干 万 不 要 自以为是 地 把 重要 的 文本 信息 使 
用 content 属性 生成 ， 因 为 这 对 可 访问 性 和 SEO 都 很 不 友好 ，content 
属性 只 能 用 来 生成 一 些 无 关 紧 要 的 内 容 ， 如 装饰 性 图 形 或 者 序号 之 类 ; 








同样 ， 也 不 要 担心 原本 重要 的 文字 信息 会 被 content 和 蔡 换 ， 符 换 的 仅仅 


下 >y 站 情人 FI 
是 人 钢 沉 层 。 


澡 








这 里 有 人 可 能 会 反驳 : content 内 容 无 法 复制 也 可 能 是 伪 元 素 的 原 
因 ， 而 不 是 芍 换 元 素 的 原因 。 要 回答 这 个 问题 ， 我 们 可 以 将 其 与 同样 是 
替换 元 素 的 : :first-letter 对 比 一 下 。 在 正和 Firefox 浏 览 器 
下 ，: :first-letter 伪 元 素 内 容 都 是 可 以 被 选中 的 ， 但 
是 ::before/::after 内 容 却 无 法 选中 。 由 此 可 见 ， 文 字 无 法 选中 多 半 
是 content 的 原因， 而 非 伪 元 素 。 








(2) 不 能 左右 :empty 伪 类 。:empty 是 一 个 CSS 选 择 器 ， 当 元 素 
里 面 无 内 容 的 时 候 进 行 匹 配 。 例 如 ， 下 面 的 HTML 和 CSS 代 码 : 


<div> 有 内 容 </divy> 
<div></div> 


div { padding: 16px; border: 16px solid #cd6666; } 
div:empty { border-style: dashed; } 





前 面 一 个 <div> 是 实 线 边框 ， 而 后 面 的 ， 因 为 里 面 无 内 容 ， 所 以 就 是 虚 
线 边 框 。 


接 下 来 ， 我 们 使 用 content 属性 给 <div> 生成 一 些 文字 ， 例 如 : 


div: :after { content:“" 伪 元 素 生 成 内 容 "; } 








结果 看 上 去 好 像 <div> 里 面 出 现 了 文字 内 容 ， 实 际 上 ， 还 是 当成 
了 :empty ， 最 终 效果 如 图 4-14 所 示 ， 是 一 个 虚 框 。 手 动 输入 
http://demo.cssworld.cn/4/1-6.php 或 者 扫 下 面 的 二 维 码 。 





EE MM 
伪 元 素 生 成 内 容 
Ba mg gg gag Ba 归 


图 4-14 ”content 无 法 影响 :empty 选择 器 


(3) content 动态 生成 值 无 法 获取 。content 是 一 个 非常 强大 的 
CSS 属 性 ， 其 中 一 个 强大 之 处 就 是 计数 喜 效 果 ， 可 以 目 动 昧 加 数值 ， 例 
如 ， 图 4-15 中 的 数字 3 就 是 content 动态 生成 的 (具体 参考 4.1.2 节 计数 
铬 部 分 ) 。 


下 面 中 国 十 大 冰淇淋 你 吃 过 几 个 ? 


1. 加 哈 根 达 斯 

2. 国 和 路 雪 wall's 
3. 国 八 专 冰淇淋 
4. 国 DQ 冰淇淋 

5. 国 蒙牛 冰淇淋 
6. 图 省 巢 冰 湛 淋 
7. 里 伊利 冰淇淋 
8. 时 乐 可 可 冰淇淋 
9. 国 新 城市 冰淇淋 


10. 昌明 ; 台 MEDI 


你 总 共 选 择 了 3 款 冰 淇 淋 ! 





图 4-15 ”content 属 性 动态 生成 数值 


核心 CSS 代 码 如 下 : 


.total::after { 
content: counter(icecream); 


} 





我 们 是 无 法 获得 此 时 content 对 应 的 具体 数值 是 多 少 的 ， 一 点 儿 办 
法 都 没有 。getComputedStyle 方法 可 以 获得 伪 元 素 的 计算 样式 。 但 
是 ， 得 到 的 只 是 纯粹 的 content 在 CSS 文 件 中 的 属性 值 。 例 如 ， 这 里 : 





var dom = document.querySelector(".total"), 
window.getComputedstyle(dom ，"::after").content;  // 结果 是 : "counter(ice 


cream)" 





结果 是 "counter(icecream)" ， 而 不 是 数值 3 。 


当然 ，content 生成 内 容 还 有 其 他 很 多 和 普通 元 素 不 一 样 的 特性 ， 
驶 不 一 一 介绍 了 ， 我 们 不 妨 把 更 多 注意 力 放 在 下 一 节 内 容 上 ， 即 
与 content 属性 相关 的 实用 技术 。 


4.1.2 content 内 容 生 成 技术 





页 


在 实际 项 目 中 ，content 属性 几乎 都 是 用 在 : :before/::after 这 
两 个 伪 元 素 中 ， 因 此 , “content 内 容 生成 技术 ”有 时 候 也 称 
为 “: :before/ ::after 伪 元 素 技术 ”。 





提前 说 明 一 下 ， 因 为 本 书目 标 浏 贤 费 是 IE8 及 以 上 版 本 浏览 占 ， 而 
下 8 浏览 器 仅 文 持 单 冒号 的 伪 元 素 ， 所 以 下 面 内 容 代码 示意 部 分 全 部 使 





用 单 冒 号 。 
1. content 辅助 元 素 生 成 





此 应 用 的 核心 点 不 在 于 content 生成 的 内 容 ， 而 是 伪 元 素 本 身 。 通 
常 ， 我 们 会 把 content 的 属性 值 设 置 为 空 字符 串 ， 像 这 样 : 





.element :before { 
content: ” 





只 要 是 空 字符 串 就 可以， 我 兽 多 次 见 到 有 人 设置 为 content:'."， 这 
完全 没有 必要 的 。 
然后 ， 利 用 其 他 CSS 代 码 来 生成 辅助 元 素 ， 或 实现 图 形 效 果 ， 或 实 


现 特 定 布局 。 与 使 用 显 式 的 HTML 标签 元 素 相 比 ， 这 样 做 的 好 处 是 
HTML 代 码 会 显得 更 加 干净 和 精简 。 





图 形 效果 实现 跟着 设计 走 ， 不 具有 普 适 性 ， 这 里 不 介绍 。 重 点 说 说 
辅助 元 素 在 布局 中 的 应 用 。 其 中 ， 最 常见 的 应 用 之 一 就 是 清除 浮动 融 来 
的 影响 : 





.Clear:after { 
content: ''; 
display: table; /* 也 可 以 是 'block' */ 


clear: both ; 





另外 一 个 很 具有 代表 性 的 应 用 就 是 辅助 实现 “两 端 对 齐 ” 以 及 “垂直 
居中 /上 边缘 /下 边缘 对 齐 ” 效 果 。 我 们 不 妨 来 看 一 个 二 合 一 的 实例 ， 手 动 
输入 http://demo.cssworld.cn/4/1-7.php 或 者 扫 右 侧 的 三 维 码 。 此 实例 演示 














是 一 个 自动 等 宽 布 局 且 底部 对 齐 的 柱状 图 ， 默 认 展示 了 4 项 ， 如 图 4-16 
所 示 。 当 我 们 动态 插入 更 多 柱子 元 素 ， 布 局 依然 智能 均 分 剩余 空间 ， 活 
脱 脱 一 个 弹性 盒子 布局 ， 效 果 如 图 4-17 所 示 ， 而 且 此 方法 所 有 浏览 器 全 
兼容 。 





图 4-16 ”4 个 柱 形 图 效果 


图 4-17 10 个 柱 形 图 效果 
核心 CSS 代 码 如 下 : 


.box { 
width: 256px; height: 256px; 
/* 两 端 对 齐 关键 */ 
text-align: justify; 

} 

.box:before { 
content: 
display: inline-block; 
height: 166%; 


nn 。 
2 


} 


.box:after { 
content: 
display: inline-block; 
width: 166%; 


} 

.bar { 
display: inline-block; 
width: 26px; 





对 应 的 HTML 代 码 如 下 : 





<div class="box"><i class="bar"></i> 
<i class="bar"></i> 
<i class="bar"></i> 


<i class="bar"></i> 
</div> 


至 于 实现 原理 ，:before 伪 元 素 用 于 辅助 实现 底 对 齐 ， 深 入 内 容 可 
参见 5.3 节 ; :after 伪 元 素 用 于 辅助 实现 两 端 对齐 ， 深 入 内 容 可 参见 8.6 
节 ， 这 里 不 展开 讲解 。 





VS 





这 一 方法 的 最 大 好 处 是 足够 兼容 ， 如 采 想 要 兼 容 耻 7 浏览 需 ， 直 接 
使 用 标签 元 素 即 可 ， 但 这 种 方法 也 有 不 足 之 处 ， 就 是 HTML 代码 需要 注 
意 有 些 地 方 不 能 换行 或 者 空格 ， 有 些 地 方 则 必须 要 换行 或 者 有 空格 ， 这 
在 多 人 协作 的 时 候 就 容易 出 问题 。 例 如 ， 开 发 人 员 豆 欢 编 辑 器 的 HTML 
格式 化 功能 ， 然 后 标签 自动 换行 ， 于 是 样式 就 会 出 现 俩 着 ， 所 以 ， 一 定 
记得 在 HIML 代 码 中 写 上 明确 的 注释 一 一 “这 里 千 万 不 能 换行 ”， 或 者 类 
似 这 种 。 




















2. content 字符 内 容 生 成 





content 字符 内 容 生 成 就 是 直接 写 入 字符 内 容 ， 中 英文 都 可 以 ， 比 
较 常 见 的 应 用 就 是 配合 @font-face 规则 实现 图 标 字 体 效果 。 例 如 ， 下 
面 这 个 例子 : 








@font-face { 
font-family: "myico"; 
src: Url("/fonts/4/myico.eot"); 
src: url("/fonts/4/myico.eot#iefix") format("embedded-opentype"), 
url("/fonts/4/myico.ttf") format("truetype"), 
url("/fonts/4/myico.woff") format("woff"); 


} 


.Icon-home:before { 
font-size: 64px; 
font-family: myico; 


content: "和 于” 
} 


<Span class="icon-home"></span> 


此 时 ， 页 面 显 示 的 可 能 就 不 是 一 个 “家 ” 字 ， 而 是 一 个 图 标 ， 如 图 4-18 所 
示 。 上 面 的 例子 有 对 应 的 实例 页 面 ， 手 动 输入 
http://demo.cssworld.cn/4/1-8.php 或 者 扫 下 面 的 二 维 码 。 














图 4-18 “家 ” 字 显 示 成 了 一 个 房屋 图 标 
男 外 一 个 值得 介绍 的 点 就 是 ， 除 常规 字符 之 外 ， 我 们 还 可 以 插入 


Unicode 字 符 ， 比 较 经 典 的 就 是 插入 换行 符 来 实现 某 些 布局 或 者 效果 。 
核心 CSS 代 码 如 下 : 





:after { 
content: '\A'; 
white-space: pre; 


} 





很 多 人 可 能 会 问 : 这 个 '\A' 是 什么 ?”'\A' 其 实 指 的 是 换行 符 中 的 
LF 字符 ， 其 Unicode 编 码 是 8606A ， 在 CSS 的 content 属性 中 则 直接 写 
作 '\A"' ; 换行 符 除了 LF 字符 还 有 CR 字符 ， 其 Unicode 编 码 是 6686D ， 在 
CSS 的 content 属性 中 则 直接 写作 '\D' 。CR 字 符 和 LF 字符 分 别 指 回 车 
CCR) 和 换行 (LF)〉，content 字符 生成 强大 之 处 加 在 于 不 仅 普 通 字 
符 随 便 插 ，Unicode 字 符 也 不 在 话 下 。 


那 它 具体 有 什么 作用 呢 ? 很 显然 ， 作 用 就 是 换行 。 那 换行 又 有 什么 
用 呢 ? 确实 ， 很 多 时 候 ， 换 行 效果 看 上 去 没什么 特别 之 处 ， 我 在 HTML 
中 和 弄 个 <br> 标签 不 是 照样 有 一 样 的 效果 ? 但 是 content 字符 生成 在 茶 
些 场景 下 真 的 可 以 大 放 有 异彩 ， 我 们 不 妨 看 下 面 这 个 配合 CSS3 
animation 用 来 实现 字符 动画 效果 的 例子 。 








我 们 动态 加 载 页 面 内 容 的 时 候 ， 经 常会 使 用 “正在 加 载 中 ...* 这 几 个 
字 ， 基 本 上 ， 后 面 的 3 个 点 都 是 静态 的 。 静 态 的 问题 在 于 ， 如 果 网 络 不 
流畅 ， 加 载 时 间 比 较 长 ， 束 会 给 人 有 假死 的 感觉 ， 但 是 ， 如 果 是 点 点 点 
这 种 横向 的 动画 效果 ， 用 户 就 会 耐心 很 多 ， 体 验 也 会 好 很 多 ， 用 户 流失 
率 就 会 有 所 下 降 。 没 错 ， 我 们 可 以 利用 这 里 的 ' NA" 换行 特性 让 “...” 这 几 
个 字符 动 起 来 ，HTML 和 CSS 代 码 如 下 : 








正在 加 载 中 <dot>.. .</dot> 

dot { 
display: inline-block; 
height: 1lem; 
line-height: 1; 
text-align: left; 
vertical-align: -.25em; 
overflow: hidden; 


} 
dot::before { 
display: block; 


Content : '...\A..\A.'; 
white-space: pre-wrap 
animation: dot 3s infinite step-start both ; 


} 
@keyframes dot { 
33% { transform: translateY(-2em); } 


66% { transform: translateY(-1lem); } 
} 








效果 即 达 成 ，IE6 至 IE9 浏 览 器 下 是 静态 的 点 点 点 ， 文 持 animation 
动画 的 浏览 器 下 全 部 都 是 打点 loading 动画 效果 ， 颜 色 大 小 可 控 ， 使 用 
非常 方便 。 告 想 感 受 效 果 ， 可 以 手动 输入 http://demo.cssworld.cn/4/1- 
9.php 或 者 扫 右 侧 的 二 维 码 。 








动画 实现 的 原理 不 难 理解 ， 插 入 3 行内 容 ， 分 别 是 3 个 点 、2 个 点 和 1 
个 点 ， 然 后 通过 transform 控制 垂直 人 位置， 依次 展示 每 一 行 的 内 容 。 


只 是 其 他 一 些 细节 怕 是 很 多 人 反而 有 疑问 。 


(1) 为 什么 使 用 <dot> 这 个 元 素 ? 


(2) 为 什么 使 用 : :before ， 可 不 可 以 使 用 : :after ? 





(3) 从 content 属性 值 来 看 ， 是 3 个 点 在 第 1 行 ， 而 1 个 点 反而 在 最 
后 一 行 ， 为 什么 这 么 处 理 ? 


(4) 这 里 white-space 值 为 何 使 用 的 是 pre-wrap 而 不 是 pre ? 
这 4 个 问题 的 答案 分 别 如 下 。 


(1) “dot> 是 目 定义 的 一 个 标签 元 系 ， 除 了 简约 、 语 义 化 明显 
外 ， 更 重要 的 是 方便 向 下 兼容 ， 正 8 等 低 版 本 浏览 器 不 认识 自 定 义 的 
HTML 标 签 ， 因 此 ， 会 乖 箔 地 显示 里 面 默 认 的 3 个 点 ， 对 我 们 的 CSS 代 码 
完全 忽略 。 





(2) 伪 元 素 使 用 : :before 同时 display 设置 为 block ， 是 为 了 
在 高 版 本 浏览 器 下 原来 的 3 个 点 推 到 最 下 面 ， 不 会 影响 content 的 3 行内 
容 显 示 ， 如 果 使 用 : :after 怕 是 效果 就 很 难 实现 了 。 








(3) 3 个 点 在 第 一 行 的 目的 在 于 兼容 了 9 浏览 器 ， 因 为 下 9 浏览 右 认 
识 <dot> 以 及 : :before ， 但 是 不 支持 CSS 新 世界 的 animation 属性 ， 
所 以 ， 为 了 IE9 也 能 正常 显示 静态 的 3 个 点 ， 故 而 把 3 个 点 放 在 第 一 行 。 


(4) 这 里 的 white-space:pre-wrap 改 成 white-space:pre 效 
果 其 实 是 一 样 的 ， 之 所 以 使 用 pre-wrap 作为 值 完 全 是 心情 使 然 。 关 于 
两 者 的 差异 本 书后 面 会 介绍 ， 这 里 先 不 用 深究 。 








还 有 最 后 几 个 小 技巧 ， 首 先 ，'\A' 是 不 区 分 大 小 写 的 ;其 
次 ，'\D' 也 能 实现 换行 效果 ， 但 是 ， 要 想 上 下 行 对 齐 ， 需 要 用 





在 : :before 伪 元 素 上 ， 因 为 CR 是 将 光标 移动 到 当前 行 的 开头 ， 而 LEF 是 
将 光标 “垂直 ”移动 到 下 一 行 。 





3. content 图 片 生成 
content 图 片 生成 指 的 是 直接 用 url 功能 符 显 示 图 片 ， 例 如 : 


div:before { 
content: url(1.jpg); 
} 


url 功能 符 中 的 图 片 地 址 不 仅 可 以 是 常见 的 png 、jpg 格式 ， 还 可 
以 是 ico 图 片 、svg 文件 以 及 base64URL 地 址 ， 但 不 支持 CSS3 渐 变 背 景 
图 。 








虽然 文 持 的 图 片 格式 多 种 多 样 ， 但 是 实际 项 目 中 ，content 图 卢 生 
成 用 得 并 不 多 ， 主 要 原因 在 于 图 片 的 尺寸 不 好 控制 ， 我 们 设置 宽 高 无 法 
改变 图 片 的 固有 尺寸 。 所 以 ， 伪 元 素 中 的 图 片 更 多 的 是 使 
用 background-image 模拟 ， 类 似 这 样 : 





div:before { 
content: ''; 


background: url(1.jpg); 
} 





在 我 看 来 content 图 片 生 成 技术 的 实用 性 ， 还 不 如 上 一 节 提 到 的 直 
接 使 用 content 属性 蔡 换 文字 为 图 片 的 技术， 除非 这 个 生成 的 图 片 是 
base64URL 地 址 。 因 为 content 图 片 和 <img> 图 片 的 加 载 表 现 是 一 样 
的 ， 如 果 没 有 尺 二 限制， 都 是 尺寸 为 6 ， 然 后 忽然 图 片 尺寸 一 下 子 出 


现 ， 所 导致 的 问题 就 是 页 面 加 载 的 时 候 会 晃动 ， 影 响 体 验 。 为 了 避免 这 
个 问题 ， 我 们 只 能 限制 容器 尺寸 ， 那 么 ， 既 然 限制 了 容器 尺寸 ， 为 何不 
使 用 background-image 呢 ? 显然 更 好 控制 啊 ? 所 以 ， 只 有 不 需要 控制 
尺寸 的 图 片 才 有 使 用 优势 。 














base64 图 片 由 于 内 联 在 CSS 文 件 中 ， 因 此 直接 出 现 ， 没 有 尺寸 为 6 
的 状态 ， 同 时 无 须 额外 设置 display 属性 值 为 块 状 ，CSS 代 码 更 省 。 如 
果 还 没 理解 我 说 的 ， 可 以 看 一 个 对 比例 子 ， 束 明白 什么 意思 了 。 





下 面 两 段 CSS 代 人 码 分 别 是 content 图 片 生 成 和 content 辅助 元 素 背 


景 图 : 


a[target=”blank"]:after { 

content: Url(data:image/gifibase64,R91GOD1hBQAFAIABAM6AAAAAACH5BAEAAAE 
ALAAAAAA 
FAAUAAAIHRIB2eKuOCgA7); 


} 
a[ltarget=" blank"]:after { 


content: "'; 

display: inline-block; 

width: 6px; 

height: 6px; 

background: url('blank.gif'); 





可 以 看 到 明显 前 者 使 用 的 CSS 声 明 数 量 少 很 多 。 这 里 有 一 个 实例 ， 
演示 了 如 何 借助 base64 地 址 和 content 图 片 生 成 技术 非常 简单 地 实现 新 
标签 页 链接 标示 的 效果 ， 手 动 输入 http://demo.cssworld.cn/4/1-10.php 或 
者 扫 下 面 的 二 维 码 。 结 果 如 图 4-19 所 示 。 








点 击 这 个 链接 当前 页 刷新 ， 看 看 有 没有 标记 ; 点 
击 这 个 链接 ,新 标签 页 新 打开 一 次 本 页 面 ， 看 
看 有 没有 标记 。 

图 4-19 ”新 标签 页 链接 标示 效果 


4. 了 解 content 开启 闭合 符号 生成 


content 文 持 的 属性 值 中 有 一 对 不 常用 的 open-quote 和 close- 
quote 关键 字 ， 顾 名 思 义 ， 就 是 “开启 的 引号 ”和 “闭合 的 引号 ”， 使 用 纯 
正 的 中 文 解释 就 是 < 上 引号 ”和 “下 引号 ”。 











如 果 单 看 表象 名 称 ， 貌 似 open-quote 和 close-quote 没什么 特 
别 ， 我 直接 使 用 : 


qd:before { 
content: '®'; 


} 
q:after { 
content: “2 


} 





岂 不 更 好 ? 看 ， 更 易 懂 ， 代 码 的 字符 数 还 少 了 好 几 个。 但 是 ， 实 际 
上 ，open-quote 和 close- quote 不 只 是 引号 这 么 简单 。 


CSS 志 界 中 有 一 个 名 为 quotes 的 属性 ， 可 以 指定 open-quote 和 
close-quote 字符 具体 是 人 什么。 例如， 我们 可 以 针对 不 同 语言 指定 不 








同 的 前 后 符号 





<p lang="ch"><q> 这 本 书 很 赞 ! </q></p> 

<p lang="en"><q>This book is very good!</q></p> 
<p lang="no"><q>denne bog er fantastisk!</q></p> 
/* 为 不 同 语言 指定 引号 的 表现 */ 

:lang(ch) > q { quotes: 
:lang(en) > q { quotes: '"" '"'; 


iccr' 1331 。 


:lang(no) > q { quotes: '«' '»'; 


/* 在 q 标 签 的 前 后 插入 引号 */ 
qd:before { content: open-quote; } 
qd:after { content: close-quote; } 








具体 表现 如 图 4-20 所 示 。 


“这 本 书 很 车 !“ 
"This book is very good! 


«denne bog er fantastisk!» 








图 4-20 不同 语 言 指定 不 同 开 局 闭合 符号 


你 以 为 open-quote 和 close-quote 可 以 使 用 不 同 闭合 符号 就 结束 
了 吗 ? 还 没有 结束 ， 虽 然 这 个 quotes 顾名思义 是 “引号 ”， 但 是 其 实际 
功能 是 : 我 们 可 以 指定 几乎 任意 的 字符 ， 而 且 是 任意 数量 的 字符 。 因 
此 ， 我 们 可 以 玩 得 更 加 灵活 多 变 : 























.ask { 
quotes: ' 提 问 : “" '”'; 


} 


.answer { 
quotes: "回答 : “" '”»'，; 





} 

.ask:before， 

.answer:before { 
content: open-quote,; 


} 


.ask:after, 
.answer:after { 
content: close-quote; 


} 
<p class="ask"> 为 什么 open-quote/close-quote 很 少 使 用 ? </p> 
<p class="answer"> 因 为 直接 使 用 字符 更 干脆 ! </p> 








结果 与 如 图 4-21 所 示 类 似 。 


提问 : “为 什么 open-quote/close-quote 很 少 使 用 ?" 


回答 : “因为 直接 使 用 字符 更 干脆 ! 








图 4-21 普通 字符 鸠 占 静 业 效 果 








CSS 这 门 语言 很 有 意思 ， 我 们 常用 的 一 些 功 能 往往 并 不 是 这 些 属 性 
当初 设计 的 本 意 ， 就 好 比 这 里 的 open-quote 本 意 应 该 显示 引号 ， 这 里 
却 主要 用 来 显示 标题 。 大 多 数 服务 型 网 站 都 是 有 帮助 页 面 的 ， 使 用 这 种 
技术 可 以 让 我 们 的 HIML 更 加 干净 简洁 。 


通过 上 面 一 番 简 单 介绍 ，open-quote 和 close-quote 给 人 感觉 挺 
厉害 的 ， 应 该 被 广泛 使 用 才 对 ， 可 为 何 很 多 人 闻所未闻 、 见 所 未 见 呢 ? 





答案 束 在 于 此 技术 具有 完全 可 将 代 性 ， 且 和 丛 换 实现 的 方法 还 更 容易 
上 手 。 我 们 还 以 上 面 的 “提问 /回答 ”应 用 为 例 ， 如 果 我 们 直接 使 用 字符 生 
成 会 这 样 : 








.ask:before { 
content : ' 提 问 : “ 

} 

.answer:before { 
content: ' 回 答 : “' 


了 





} 
.ask:after, 
.answer:after { 


content: '”',; 
} 


只 出 现 了 一 个 CSS 属 性 ， 学 习 成 本 更 低 ; 直接 使 用 字符 ， 更 容易 理解 ; 
a 一 点 点 。 由 于 直接 “字符 生成 ”可 以 很 好 地 满足 我 
们 的 开发 需求 ， 因 此 ， 还 需要 额外 学 习 的 open-quote 和 close-quote 
就 鲜 有 人 问津 了 。 





实际 上 ， 我 们 可 以 把 open-quote 和 close-quote 看 成 是 一 种 变 
量 ， 理 论 上 ， 这 种 设计 要 比 直接 字符 输出 更 好 维护 ， 其 原理 等 同 于 
JavaScript 中 的 变量 ， 类 似 这 样 : 


var quotes = ['“', '”»']; 


var openQuote = quotes[6]; 
var closeQuote = quotes[1]; 








理论 上 应 该 更 好 维护 ， 但 是 ，CSS 中 的 选择 器 本 身 就 有 变量 的 概 
念 ， 如 .ask 和 .answer ， 只 要 改 一 下 ， 所 有 有 相关 类 名 的 元 素 都 会 发 
生变 化 。 于 是 ， 使 用 open-quote 和 close-quote 进行 内 容 生 成 的 最 具 
说 服 力 的 理由 也 被 扼杀 了 。 








综合 这 些 原因 ， 看 似 强 大 的 open-quote 和 close-quote 关键 字 
后 变 得 很 鸡肋 。 





顺便 提 一 下 ，CSS 中 还 有 no-open-quote 和 no-close-quote 关键 
字 ， 顾 名 思 义 ， 引 号 不 需要 了 ， 同 样 是 看 上 去 很 酷 实 际 却 很 鸡肋 的 CSS 
关键 字 ， 这 里 我 就 不 展开 了 。 





5. content attr 属性 值 内 容 生成 


此 功能 比较 常用 ， 我 个 人 用 得 就 比较 多 ， 比 方 说 前 面 一 节 替 换 元 素 
那里 利用 alt 属性 显示 图 片 描述 信息 的 例子 : 
img: :after { 


/* 生成 alt 信 息 */ 
content: attr(alt) 

















/* 其 他 CSS 略 */ 





} 





除了 原生 的 HTML 属 性 ， 自 定义 的 HTML 属 性 也 是 可 以 生产 的 ， 例 
如 : 
.icon:before { 


content: attr(data-title); 
} 


需要 注意 的 是 ，attr 功能 符 中 的 属性 值 名 称 和 干 万 不 要 上 自以为是 地 
在 外 面 加 个 引号 。 不 能 有 引号 ， 人 否则 浏览 器 会 认为 是 无 效 的 声明 ， 如 图 
4-22 所 示 。 
Pseudo :before element 


”一 一 一 一 = 
下 
J 





图 4-22 ”attr 里 面值 不 能 有 引号 





此 技术 虽 实 用 ， 但 并 无 多 少 可 以 展开 的 地 方 ， 因 此 就 说 这 么 多 。 
6. 深入 理解 content 计数 器 


计数 器 效果 可 以 说 是 content 部 分 的 重 中 之 重 ， 因 为 此 功能 非 第 强 


大 、 实 用 ， 且 不 具有 可 替代 性 ， 甚 至 可 以 实现 连 JavaScript 都 不 好 实现 的 
效果 。 但 同样 ，content 计数 器 具有 一 定 的 深度 ， 大 家 可 以 适当 放 慢 节 
奏 。 





所 谓 CSS 计 数 嚣 效果， 指 的 是 使 用 CSS 代 码 实现 随 着 元 素数 目 增 
多 ， 数 值 也 跟着 变 大 的 效果 。 举 个 例子 ， 我 曾经 在 业余 时 间 给 同事 做 过 
一 个 点 果汁 的 小 系统 ， 由 于 果汁 店 经 常会 有 水 果 因 “果品 ”爆发 被 竞相 购 
买 而 缺 货 的 情况 ， 因 此 ， 每 人 可 以 选择 3 种 自由 搭配 的 饮品 ， 以 免 无 货 
的 尴 雁 。 于 是 ， 束 有 了 第 1 选择 、 第 2 选择 和 第 3 选择 ， 如 岁 4-23 所 示 。 





您 已 选择 : | 黄瓜 汁 了 了 | 黄瓜 型 汁 了 | 双 瓜 汗 





图 4-23 ”简单 的 计数 器 效果 实现 举例 


图 中 的 灰色 小 字 中 的 1、2、3 就 是 使 用 CSS 计 数 器 生成 的 ， 这 个 可 
以 说 是 最 最 基本 、 最 最 简单 的 计数 器 应 用 了 。 实 际 上 ， 计 数 需 能 够 实现 
的 效果 非 钟 强大。 但是， 万丈 高 楼 平地 起 ， 在 介绍 高 级 应 用 之 前 ， 我 们 
一 定 要 先 牢 牢 掌 握 与 计数 需 相关 的 基础 知识 。 

















CSS 计 数 束 跟 我 们 军训 报 数 一 样 。 其 中 有 这 么 几 个 关键 点 。 
(1) 班级 命名 : 有 个 称呼 ， 如 生 信 4 班 ， 就 知道 谁 是 谁 了 。 


(2) 报 数 规则 : 1、2、3、4 递 增 报 数 ， 还 是 1、2、1、2 报 数 ， 
班级 的 人 知道 


(3) 开始 报 数 : 不 及 口令 ， 大 眼 瞪 小 眼 ， 会 乱 了 秩序 。 


巧 的 是 ， 以 上 3 个 关键 点 正好 对 应 CSS 计 数 器 的 两 个 属性 
(counter-reset 和 counter-increment ) 和 一 个 方法 


(counter()/counters() ) ， 下 面 依次 讲解 。 


(1) 属性 counter-reset 。 顾 名 思 义 ， 束 是 “计数 器 - 重 置 ”的 意 
其 实 就 是 “班级 命名 ”， 主 要 作用 就 是 给 计数 器 起 个 名 字 。 如 果 可 





a 
能 ， 顺 便 告诉 下 从 哪个 数字 开始 计数 。 默 认 是 8 ， 注 意 ， 默 认 是 8 而 不 
是 1 。 可 能 有 人 会 疑惑 ， 网 上 的 各 种 例子 默认 显示 的 第 1 个 数字 不 都 是 1 


? 那 是 因为 受 了 counter-increment 普照 的 影响 ， 后 面 会 详细 讲 


J 


Wl 


慌 


好 ， 这 里 我 们 先 看 两 个 简单 的 counter-reset 的 例子 : 


/* 计数 器 名 称 是 "wangxiaoer'， 并 且 默认 起 始 值 是 2 */ 





.XXX { counter-reset: wangxiaoer 2; } 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-11.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-24 所 示 。 





我 叫 王 小 二 ， 字 如 其 名 ， 下面 要 出 现 的 数字 是 : 


2 


图 4-24 ”counter-reset 为 起 始 值 为 2 


counter-reset 的 计数 重 置 可 以 是 负数 ， 如 -2 ， 也 可 以 写成 小 
数 ， 如 2.99 ， 不 过 ，IE 和 Firefox 对 此 都 不 识别 ， 认 为 是 不 合法 数值 ， 
直接 无 视 ， 当 作 默 认 值 8 来 处 理 ;，Chrome 不 嫌 贫 嫉 富 ， 任 何 小 数 都 是 向 
下 取 整 ， 如 2.99 当成 2 处 理 ， 于 是 王 小 二 还 是 那个 王 小 二 。 





到 此 为 止 ? 当然 不 是 ! counter-reset 还 有 一 手 ， 就 是 多 个 计数 
器 同时 命名 。 例 如 ， 王 小 二 和 王 小 三 同时 登台 : 


.XXX { counter-reset: wangxiaoer 2 wangxiaosan 3; } 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/4/1-12.php 或 者 扫 下 面 


的 二 维 码 。 结 果 如 图 4-25 所 示 。 





我 叫 王 小 二 ， 万 万 没 想到 ， 会 出 现 另外 一 个 数字 : 
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图 4-25 ”counter-reset 多 值 并 存 





另外 ，counter-reset 还 可 以 设置 为 none 和 inherit 。 取 消 重 置 
以 及 继承 重 置 。 这 里 就 不 展开 了 。 


(2) 属性 counter-increment 。 顾 名 思 义 ， 束 是 “计数 器 递增 ”的 
意思 。 值 为 counter-reset 的 1 个 或 多 个 关键 字 ， 后 面 可 以 跟随 数字 ， 
表示 每 次 计数 的 变化 值 。 如 果 省 略 ， 则 使 用 默认 变化 值 1 (方便 起 见 ， 
下 面 都 使 用 默认 值 做 说 明 〉。 





CSS 的 计数 器 的 计数 是 有 一 套 规则 的 ， 我 将 之 形象 地 称 为 “普照 规 
则 ”。 具 体 来 讲 就 是 普照 源 (counter-reset ) 唯一 ， 每 普照 





(counter-increment ) 一 次 ， 普 照 源 增加 一 次 计数 值 。 


于 是 ， 我 们 就 可 以 解释 上 面 提 到 的 “默认 值 是 0 的 问题 了 。 通 常 CSS 
计数 器 应 用 的 时 候 ， 我 们 都 会 使 用 counter-increment ， 肯 定 要 用 这 
个 ， 否 则 怎么 递增 呢 ! 而 且 一 般 都 是 一 次 普照 ， 正 好 加 1， 于 是 ， 第 一 
个 计数 的 值 就 是 1 (0+1=1) ! 


下 面 通过 几 个 例子 给 大 家 形象 地 展示 一 下 “普照 规则 ”。 


手动 输入 http:/demo.cssworld.cn/4/1-13.php 或 者 扫 下 面 的 二 维 码 。 
本 示例 中 ， 王 小 二 的 counter-reset 值 是 wangxiaoer 2 ， 但 是 ， 显 
示 的 计数 不 是 小 2 而 是 小 3 ， 王 小 二 变 成 了 王 小 三 ! 如 图 4-26 所 示 。 


ee rt dO 








我 叫 王 小 二 ， 万 万 没 想 到 ， 会 出 现 另外 一 个 数字 : 
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图 4-26 ”counter-increment 递增 与 counter-reset 值 














示例 效果 的 核心 代码 如 下 : 


.Counter { 
counter-reset: wangxiaoer 2; 
counter-increment: wangxiaoer; 


} 
.Counter:before { 

content: counter(wangxiaoer); 
} 


<p class="counter"></p> 





这 里 counter-increment 普照 了 <p> 标签 ，counter-reset 值 增 
加 ， 默 认 递 增 1， 于 是 计数 从 设置 的 初始 值 2 变 成 了 3 ，wangxiaoer 束 
这 里 的 计数 器 ， 自 然 伪 元 素 content 值 counter (wangxiaoer) 就 
3 





ft 二 


O 


当然 ， 它 也 可 以 普照 自 刁 ， 也 就 是 counter-increment 直接 设置 
在 伪 元 素 上 : 


.COunter { 
counter-reset: wangxiaoer 2; 


} 


.Counter:before { 


content: counter(wangxiaoer); 
counter-increment: wangxiaoer; 





依然 是 1 次 普照 ， 依 旧 全 局 的 计数 器 加 1， 所 以 显示 的 数值 还 是 3 ， 
和 上 面 的 例子 一 样 。 








趁 热 打铁 ， 如 果 父 元 素 和 子 元 素 都 被 counter-increment 普照 1 
次 ， 结 果 会 如 何 呢 ? 


很 简单 ， 父 元 素 1 次 普照 ， 子 元 素 1 次 普照 ， 共 2 次 普照 ，counter- 
reset 设置 的 计数 器 值 增加 2 次 ， 计 数 起 始 值 是 2 ， 于 是 现实 的 数字 就 


是 4 啦 ! 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-14.php 或 者 扫 下 面 
的 二 维 码 。 结 果 4 如 ”图 4-27 所 示 。 








图 4-27 counter-increment 父子 连续 普照 递增 





I 


核心 CSS 代 码 如 下 : 





.Counter { 
counter-reset: wangxiaoer 2; 
counter-increment: wangxiaoer; 


.Counter:before { 
content: counter(wangxiaoer); 
counter-increment: wangxiaoer; 


”| 
总 而 言 之 ， 无 论 位 置 在 何 处 ， 只 要 有 counter-increment ， 对 应 
的 计数 器 的 值 就 会 变化 ，counter() 只 是 输出 而 已 ! 


理解 了 “普照 规则 ”， 通 党 的 计数 器 递增 效 末 也 惑 可 以 理解 了 。 





考虑 下 和 面 这 两 个 问题 : 


(1) 和 匈 爸 受到 普照 ， 且 重 置 默认 值 86 ， 和 苞 和 区 有 两 个 孩子 。 孩 子 目 
吴 都 没有 普照 。 两 个 孩子 的 计数 值 是 多 少 ? 





(2) 和 爷 多 没有 普照 ， 重 置 默 认 值 6 ， 和 多 区 有 两 个 孩子 。 孩 子 目 喘 
都 接受 普照 。 两 个 孩子 的 计数 值 是 多 少 ? 





答案 居然 不 一 样 ， 有 什么 差别 呢 ? 


很 简单 。 什 么 爸爸 、 孩 子 ， 你 都 不 要 关心 ， 只 需要 看 被 普照 了 几 
次 。 情 况 1 只 有 苞 爸 被 普照 ， 因 此 ， 计 数 器 增加 1 次 ， 此 时 两 个 孩子 的 
counter 自然 都 是 1 。 和 情况 2， 两 个 孩子 被 普照 ， 普 照 2 次 ， 第 一 个 孩子 
普照 之 时 ， 计 数 器 加 1， 也 就 是 1 ; 第 二 个 孩子 普照 之 时 再 加 1， 于 是 就 
是 2 。 于 是 ， 两 个 孩子 的 counter 输出 束 是 1,2 。 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-15.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-28 所 示 。 





我 叫 王 小 二 ， 万 万 没 想 到 ， 兄弟 情 深 , 计数 递增 ! 


沁 委 


图 4-28 兄弟 情 深 ,计数 递增 





核心 CSS 代 码 如 下 : 


.Counter { 
counter-reset: wangxiaoer 2; 


} 


.Counter :before, 


.Counter:after { 
content: counter(wangxiaoer); 
counter-increment: wangxiaoer; 





计数 器 的 数值 变化 遵循 HTML 泻 染 顺序 ， 遇 到 一 个 Increment 计数 
器 就 变化 ， 什 么 时 候 counter 输出 就 输出 此 时 的 计数 值 。 


除了 以 上 基本 特性 外 ，counter-increment 还 有 其 他 一 些 设 定 。 


。 counter-reset 可 以 一 次 命名 两 个 计数 器 名 称 ，counter- 
increment 上 自然 有 与 之 呼应 的 设 定 ， 在 写法 上 也 是 空格 区 分 就 可 以 
了 。 例 如 : 


.Counter { 
counter-reset: wangxiaoer 2 wangxiaosan 3; 
counter-increment: wangxiaoer wangxiaosan; 


} 
.Counter:before { 
content: counter(wangxiaoer); 


} 


.Counter:after { 
content: counter(wangxiaosan); 


} 





结果 如 图 4-29 所 示 。 








。 正如 本 节 开 始 时 提 到 的 ， 这 变化 的 值 不 一 定 是 1 ， 可 以 灵活 设置 。 
例如 : 


counter-increment: counter 2 


那 就 是 两 个 两 个 地 增加 ， 对 比 看 更 棒 ! 图 4-30 左 半 是 默认 的 加 1， 
右 半 是 加 2， 
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图 4-29 多 个 计数 器 同时 递增 





1. increment + 显示 2 increment + 显示 


2，increment + 显示 4，increment + 显示 

3. increment + 显示 6，increment + 显示 
4，increment + 显示 8.，increment + 显示 

4， 显 示 8. 显示 

4， 显示 8. 显示 





图 4-30 不同 递增 值 的 计数 对 比 


变化 的 值 还 可 以 是 负数 ， 例 如 : 


counter-increment: counter -1 


这 样 束 有 了 递减 排序 效果 啦 ! 


。 值 还 可 以 是 none 或 者 inherit 。 


(3) 方法 counter()/counters() 。 这 是 方法 ， 不 是 属性 。 类 似 
CSS3 中 的 calc() 计算 。 这 里 的 作用 很 单纯 ， 即 显示 计数 ， 不 过 名 称 、 
用 法 有 多 个 ， 如 图 4-31 所 示 。 


content:cou } 


图 4-31 


急 counter (name, style) 

急 counters (name, string) 

® counters (name, string, style) 
sa IFL... 





counter/counters 的 一 些 名 称 和 月 


有 Y 





bn 
上 


去 


到 目前 为 止 的 所 有 示例 使 用 的 都 是 最 简单 的 用 法 : 


/* name 就 是 counter-reset 的 名 称 */ 





counter(name) 


那 下 面 这 个 语法 是 什么 意思 呢 ? 


counter(name, style) 


这 里 的 style 参数 还 是 有 些 名 堂 的 。 它 支持 的 关键 字 值 就 是 list- 
style-type 支持 的 那些 值 。 它 的 作用 是 我 们 递增 递减 可 以 不 一 定 
数字 ， 还 可 以 是 英文 字母 或 者 罗马 文 等 。 








list-style-type: 


disc | circle | square | decimal | lower-roman | upper-roman | 
lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | 


lower-greek 


| hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-1 
atin | upper-latin 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-16.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-32 所 示 。 





我 叫 王 小 


二 ， 万 万 没 想到 ， 我 变 成 了 罗马 人 ! 








图 4-32 小写 罗马 数字 格式 表示 当前 计数 器 的 值 


核心 CSS 代 码 如 下 : 


content: counter(wangxiaoer, lower-roman); 


counter 还 支持 级 联 。 也 就 是 说 ， 一 个 content 属性 值 可 以 有 多 
个 counter() 方法 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-17.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-33 所 示 。 





图 4-33 ”多 个 counter 并 存 





核心 CSS 代 码 如 下 : 


.Counter { counter-reset: wangxiaoer 2 wangxiaosan 3; } 
.Counter:before { 
content: counter(wangxiaoer) '\A' counter(wangxiaosan); 


white-space: pre; 


} 





下 面 介 绍 一 下 counters() 方法 。 看 似 只 比 counter 多 了 个 字母 s 
， 但 却 有 着 至 尊 宝 变 成 孙悟空 的 意味 在 里 面 。counters 几乎 可 以 说 是 
葡 套 计数 的 代名词 。 











我 们 平时 的 序号 不 可 能 就 只 是 1、2、3、4...... 还 会 有 诸如 1.1、 


1.2、1.3 等 的 子 序 号 。 前 者 就 是 counter() 于 的 事情 ， 后 者 就 
是 counters() 干 的 事情 。 





counters() 的 基本 用 法 为 目 : 


counters(name, string); 


其 中 ，string 参数 为 字符 串 (需要 引号 包围 的 ， 是 必需 参数 ) ， 表 示 
子 序号 的 连接 字符 串 。 例 如 ，1.1 的 string 就 是 '.' ，1-1 就 是 '-' 





看 上 去 很 简单 。 但 是 ， 如 果 理 解 不 是 很 深刻 ， 日 后 再 使 用 肯定 会 遇 
到 厅 烦 一 一 “ 喷 ? 怎么 没有 子 序列 ， 明 明 语 法 正确 啊 ? ”首先 ， 记 住 这 一 
句 话 :“ 普 照 源 是 唯一 的 。” 所 以 ， 如 果 只 在 <body> 标签 上 设 
置 counter-reset ， 就 算 子 元 素 摧 套 了 里 外 十 八 层 ， 还 是 不 会 有 任何 
舱 套 序号 出 现 ! 所 以 ， 要 想 实现 租 套 ， 必 须 让 每 一 个 列表 容器 拥有 一 
个 “普照 源 "， 通 过 子 磋 对 父 磊 的 counter-reset 重 置 、 配 
合 counters() 方法 才能 实现 计数 侍 套 效果 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/1-18.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 4-34 所 示 。 





我 叫 王 小 二 ， 万 万 没 想 到 ,一 着 不 愤 ， 娃娃 连 营 满 地 滚 : 


1. 我 是 王 小 一 
1-1. 我 是 于 小 二 的 大 儿子 
1-2. 我 是 于 小 二 的 二 儿子 
1-2-1. 我 是 王 小 二 的 二 儿子 的 大 孙子 
1-2-2. 我 是 王 小 二 的 二 儿子 的 二 孙子 


1-2-3. 我 是 王 小 二 的 二 儿子 的 小 孙子 
1-3. 我 是 于 小 二 的 二 儿子 
2. 我 是 王 小 二 
3. 我 是 王 小 四 


3-1. 我 是 王 小 四 的 大 儿子 
图 4-34 ”counters 的 string 参数 与 舱 套 


使 用 counters() 实现 计数 般 套 效果 的 时 候 很 容易 过 到 类 似 这 样 的 
麻烦 一 一 “ 呈 ， 怎 么 子 序列 不 按 层级 顺序 来 呀 ?命名 语法 明明 完全 正确 
啊 ! ”还 是 要 记 住 这 一 句 话 :“ 一 个 容器 里 的 普照 源 (counter-reset 
) 是 唯一 的 。” 所 以 ， 如 果 你 不 小 心 把 计数 显示 和 计数 重 置 元 素 以 兄弟 
元 素 形 式 放 在 一 起 (虽然 HTML 内 容 布局 呈现 是 没有 异常 的 ) ， 就 很 可 
能 会 出 现 计数 序号 乱入 的 情况 。 





还 是 举 个 例子 说 明 一 下 吧 ， 手 动 输入 http://demo.cssworld.cn/4/1- 
19.php 或 者 扫 下 面 的 二 维 码 。 结 果 如 图 4-35 所 示 。 这 时 就 会 看 到 标 红 部 
分 的 序号 显示 异常 了 ! 








为 何 会 出 现 这 个 问题 ? 我 们 看 一 ThHTML 〈 主 要 是 注释 ) : 


<div class="reset"> 
<div class="counter"> 我 是 王 小 二 </div> 
<div class="reset"><-- 先 下 面 文字 说 明 --> 








</div> 
<div class="counter"> 我 是 王 小 三 </div> 





<div class="counter"> 我 是 王 小 四 </div> 
<div class="reset"> 
<div class="counter"> 我 是 王 小 四 的 大 儿子 </div> 
</div> 
</div> 








这 里 的 .reset 与 上 面 的 .counter 是 兄弟 关系 ， 而 不 是 父子 关系 。 虽 然 
布局 泻 染 上 没有 差异 ， 但 是 一 个 容器 的 counter-reset 是 唯一 的 ， 一 
旦 子 元 素 出 现 counter-reset ， 就 会 改变 整个 容器 的 租 套 关系 ， 于 

是 ， 后 面 的 “ 王 小 三 ”*“ 王 小 四 ”其 实 已 经 进入 了 二 级 租 套 ， 因 此 显示 的 
是 1-3 和 1-4 ， 相 信 读 者 稍稍 体会 一 下 就 能 明白 了 。 











我 明王 小 一 ， 万 万 没 想到 ， 一 着 个 剧 ， 子 孙 成 群 ( 反例 ) : 


1. 我 是 王 小 一 
1-1. 我 是 王 小 一 的 大 儿子 
1-2. 我 是 王 小 二 的 二 儿子 
1-2-1. 我 是 王 小 二 的 二 儿子 的 大 孙子 
E22; 我 是 王 水 二 的 三 儿子 的 三 孙子 
1-2-3. 我 是 王 小 二 的 二 儿子 的 小 孙子 
1-2-4. 我 是 王 小 二 的 三 儿子 
1-3. 我 是 王 小 三 
1-4. 我 是 王 小 四 


1-1. 我 是 王 小 四 的 大 儿子 








图 4-35 ”counters 列表 被 重 置 乱 入 








这 种 计数 效果 在 模拟 书籍 的 目录 效果 时 非常 实用 ， 大 家 可 以 参照 上 
面 正确 的 栓 套 例子 修 修改 改 就 可 以 了 。 


counters() 也 是 支持 style 自 定 义 递增 形式 的 : 


counters(name, string, style) 


它 与 counter() 的 style 参数 使 用 一 致 ， 这 里 不 敬 述 。 


最 后 ， 还 有 一 个 比较 重要 的 点 需要 说 明 一 下 ， 束 是 显示 content 计 
数值 的 那个 DOM 元 素 在 文档 流 中 的 位 置 一 定 要 在 counter-increment 
元 素 的 后 面 ， 否 则 是 没有 计数 效果 的 。 


举 个 例子 ， 我 们 可 以 使 用 纯 CSS 实 现 自 动 统计 选中 元 素 个 数 的 效 
果 ， 但 是 很 可 能 显示 数值 的 视觉 位 置 是 在 操作 区 域 的 左 侧 或 者 上 方 ， 类 
似 图 4-36 所 示 。 








列表 选项 1 


列表 选项 2 霸 


列表 选项 3 


列表 选项 4 


256X192 





图 4-36 ”counters 数值 显示 在 操作 区 域 左 侧 


如 采 我 们 是 传统 的 布局 ， 左 侧 的 圆 奖 中 的 数值 必然 是 无 法 显现 的 ， 
我 们 需要 把 堪 侧 的 列表 选项 元 素 放 在 操作 元 素 的 后 面 才 可 以 ， 关 似 下 面 
这 样 : 


<main></main> 
<nav></nav> 


7. content 内 容 生成 的 混合 特性 


所 谓 “content 内 容 生成 的 混合 特性 ? 指 的 是 各 种 content 内 容 生成 
语法 是 可 以 混合 在 一 起 使 用 的 ， 举 下 面 几 个 简单 的 例子 : 





a:after { 
content: "(" attr(href) ")"; 


} 
q:before { 
content: open-quote url(1.jpg); 


.Counter:before { 
content: counters(wangxiaoer, '-') 








于 是 ， 我 们 如 果 希 望 在 伪 元 素 中 同时 显示 图 片 和 文字 排列 效果 ， 只 





需 | 
阵 、 分 别 负 责 一 个 类 型 。 


~ 


3 





总 而 言 之 ，content 内 容 生 成 技术 是 非常 强大 的 ， 关 键 要 看 大 家 的 
内 累 、 有 灵感 和 创意 。 


4.2 温和 的 padding 属性 


盒 尺 寸 四 大 家 族 元 素 中 ，padding 的 性 格 是 最 温和 的 。 所 谓 “ 温 
和 ” 指 的 是 我 们 在 使 用 padding 进行 页 面 开 发 的 时 候 很 少 会 出 现 意 想 不 
到 的 情况 ， 这 种 感觉 就 好 比 和 一 个 几乎 不 会 发 脾气 的 人 相处 。 


padding 指 盒子 的 内 补 间 。“ 补 间 ” 这 个 词 比较 术语 化 ， 我 们 不 妨 将 
其 理解 为 快递 盒子 内 快递 商品 外 包 囊 的 那 层 起 保护 作用 的 海 绢 。 只 是 在 
CSS 中 ， 这 个 “海绵 ”默认 是 透明 的 。 在 现实 世界 中 ， 海 绵 不 会 影响 盒子 





的 尺寸 ， 但 在 CSS 世 界 中 ， 尺 寸 规则 就 有 所 不 同 了 。 
4.2.1 padding 与 元 素 的 尺寸 


因为 CSS 中 默认 的 pox-sizing 是 content-box ， 所 以 使 
用 padding 会 增加 元 素 的 尺寸 。 例 如 : 
.box { 


width: 86px; 
padding: 28px; 


} 





如 果 不 考 虑 其 他 CSS 干 扰 ， 此 时 .box 元 素 所 占据 的 宽度 就 应 该 是 120 像 
素 〈86px +26px x2) ， 这 其 实 是 不 符合 现实 世界 的 认 知 的 ， 人 们 总 是 
习惯 把 代码 世界 和 现实 世界 做 映射 ， 因 此 ， 新 人 难免 会 在 padding 的 尺 
寸 问 题 上 躁 到 点 坑 。 这 也 导致 很 多 人 乐此不疲 地 设置 box-sizing 

为 border-box ， 甚 至 直接 全 局 重 置 : 


* { box-sizing: border-box; } 


我 个 人 是 不 推荐 这 种 做 法 的 ， 原 因 见 3.2.4 节 。 局 部 使 用 ， 尽 量 采 用 
无 宽度 以 及 宽度 分 离 准则 实现 才 是 好 的 解决 之 道 。 

















很 多 人 可 能 有 这 样 的 误区 ， 认 为 设置 了 box-sizing:border- 
box， 元 素 尺 寸 束 不 会 变化 。 大 多 数 情况 下 是 这 样 的 ， 但 是 ， 如 果 
padding 值 足够 大 ， 那 么 width 也 无 能 为 力 了 。 例 如 : 





.box { 
width: 86px; 
padding: 26px 66pX 


box-sizing: border-box; 
} 


则 此 时 的 width 会 无 效 ， 最 终 宽 度 为 120 像 素 (“686pxx 2) ， 而 里 面 的 
内 容 则 表现 为 “首选 最 小 宽度 ”。 











上 述 斥 十 表现 是 对 具有 块 状 特性 的 元 素 而 言 的 ， 对 于 内 联 元 素 〈 不 
包括 图 片 等 蔡 换 元 素 ) 表现 则 有 些许 不 同 。 这 种 不 同 的 表现 让 很 多 很 多 
的 前 端 同事 有 这 么 一 个 错误 的 认识 : 内 联 元 素 的 padding 只 会 影响 水 平 
方向 ， 不 会 影响 垂直 方 问 。 











这 种 认 知 是 不 准确 的 ， 内 联 元 素 的 padding 在 垂直 方向 同样 会 影响 
布局 ， 影 啊 视 觉 表 现 。 只 是 因为 内 联 元 陛 没 有 可 视 宽 度 和 可 视 高 度 的 说 
法 (clientHeight 和 clientNidth 永远 是 8 ) ， 垂 直方 向 的 行为 表现 
完全 受 line-height 和 vertical-align 的 影响， 视觉 上 并 没有 改变 
和 上 一 行 下 一 行内 容 的 间距 ， 因 此 ， 给 我 们 的 感觉 就 会 是 垂直 padding 
没有 起 作用 。 

















如 果 我 们 给 内 联 元 素 加 个 背景 色 或 者 边框 ， 自 然 就 可 以 看 到 其 尺寸 
空间 确实 受 padding 影响 了 。 例 如 : 


alt 
padding: 58px; 


background-color: #cd66080; 





然后 表现 束 会 如 图 4-37 所 示 这 般 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/4/2-1.php 或 者 扫 下 面 的 二 维 码 。 








图 4-37 ”内 联 元 素 padding 垂直 方向 也 是 有 效 的 




















可 以 明显 看 到 ， 斥 寸 星 有效， 但 是 对 上 下 元 系 的 原本 布局 却 没有 任 
何 影响 ， 仪 仅 是 垂直 方向 发 生 了 层 合 ， 如 图 4-38 所 示 。 


CSS 中 还 有 很 多 其 他 场景 或 属性 会 出 现 这 种 不 影响 其 他 元 素 布 局 而 
是 出 现 层 琶 效果 的 现象 。 比 如 ，relative 元 素 的 定位 、 盒 阴影 box- 
shadow 以 及 outline 等 。 这 些 层 闭 现象 虽然 看 似 类 似 ， 但 实际 上 是 有 
区 别 的 。 其 分 为 两 类 : 一 类 是 纯 视 觉 层 营 ， 不 影响 外 部 尺寸 ， 男 一 类 则 
会 影响 外 部 尺寸 。box-shadow 以 及 outline 属于 前 者 ， 而 这 里 的 
inline 元 素 的 padding 层 登 属于 后 者 。 区 分 的 方式 很 简单 ， 如 果 父 容 
器 overflow:auto ， 层 车 区 域 超出 父 容器 的 时 候 ， 没 有 演 动 条 出 现 ， 
则 是 纯 视 觉 的 ， 如 果 出 现 滚动 条 ， 则 会 影响 尺寸 、 影 响 布局 。 














如 果 上 面 的 示例 父 元 素 设置 overflow:auto ， 则 会 有 类 似 图 4-39 
所 示 的 表现 。 


内 联 元 素 垂 直 padding 也 有 作用 实例 页 面 








图 4-38 ”内 联 元 素 padding 重 直 方向 层 车 表现 


(四 





内 联 元 素 牌 直 padding 也 有 作用 实例 页 面 





图 4-39 ”内 联 元 素 垂 直 padding 影响 父 级 出 现 深 动 条 








由 此 可 见 ， 内 联 元 素 padding 对 视觉 层 和 布局 层 具 有 双重 影响 ， 所 
有 类 似 “ 垂 直方 同 padding 对 内 联 元 素 没 有 作用 ”的 说 法 显然 是 不 正确 
的 。 


好 了 ， 现 在 知道 了 内 联 元 素 padding 有 用 ， 这 对 我 们 做 实际 CSS 开 
发 有 什么 帮助 呢 ? 





首先 ， 我 们 可 以 在 不 影响 当前 布局 的 情况 下 ， 优 雅 地 增加 链接 或 按 
钮 的 点 击 区 域 大 小 。 比 方 说 ， 文 章 中 会 有 一 些 文字 链接 ， 默 认 情况 下 ， 








这 些 链接 的 点 击 区 域 的 高 度 是 受 font-size 字体 大 小 控制 的 ， 和 行 高 没 
有 关系 。 尤 其 在 Chrome 等 浏览 右 下 ， 局 度 仅 lem ， 这 人 么 小 的 高 度 ， 要 是 
在 移动 器 ， 我 们 的 手指 不 一 定 能 够 一 次 点 中 ， 可 能 要 戳 好 多 下 ， 此 时 惑 
有 必要 增加 链接 的 点 击 区 域 大 小 ， 但 是 前 提 古 不 影响 当前 的 内 容 布局 。 

此 时 ， 我 们 就 可 以 使 用 padding 天 然 实现 我 们 想 要 的 效果 ， 例 如 : 














article a { 
padding: .25em 6; 


} 








前 文 多 次 提 到 ，CSS2.1 的 属性 就 是 为 了 图 文 显示 而 设计 的 ， 从 这 一 
点 出 发 ， 我 们 就 不 难 理解 为 何 内 联 元 素 的 垂直 padding 会 是 这 样 的 样式 
表现 了 ， 目 的 就 是 如 上 面 说 的 例子 这 样 ， 增 加 点 击 区 域 同时 对 现 有 布局 
无 任何 影响 ， 如 果 我 们 设置 成 inline-block， 则 行 间距 等 很 多 麻烦 事 
就 会 出 来 。 








当然 ，CSS 的 有 趣 之 处 在 于 我 们 可 以 利用 其 特性 表现 实现 其 设计 初 
训 以 外 的 一 些 效果 。 例 如 ， 这 里 有 个 简单 的 例子 ， 利 用 内 联 元 素 的 
padding 实现 高 度 可 控 的 分 阳线 。 传 统 偷懒 的 实现 方式 可 能 是 直接 使 
用 “管道 符 ”， 如 : 











但 是 使 用 “管道 符 ” 的 话 ， 因 为 是 字符 ， 所 以 高 度 不 可 控 。 如 果 对 视觉 呈 
现 要 求 比较 高 ， 就 需要 进行 CSS 图 形 模 拟 ， 其 中 方法 之 一 就 是 可 以 借助 
内 联 元 素 和 padding 属性 来 实现 ，CSS 和 HTML 代 码 如 下 : 


a + a:before { 


content: ""; 

font-size: 90; 

padding: 16px 3px 1px; 
margin-left: 6px; 
border-left: 1px solid gray; 


} 


<a href=""> 登 录 </a><a href=""> 注 册 </a> 








一 个 高 度 不 那么 高 的 垂直 分 隔 符 就 出 来 了 ， 如 图 4-40 所 示 。 有 兴趣 
可 以 自己 感受 一 下 ， 手 动 输入 http://demo.cssworld.cn/4/2-2.php 或 者 扫 下 
面 的 二 维 码 。 





图 4-40 ”内 联 元 素 padding 实现 的 垂直 分 隔 符 





最 后 ， 再 简单 说 一 个 内 联 元 素 垂 直 padding 的 妙用 吧 ! 大 家 应 该 都 
知道 网 页 可 以 通过 地 址 栏 的 hash 值 和 页 面 HIML 中 id 值 一 样 的 元 素 发 
生 错 点 定位 吧 ? 有 时 候 ， 我 们 希望 定位 的 元 素 ， 如 标题 距离 页 面 的 项 部 
有 一 段 距离 ， 比 方 说 页 面 正 好 有 一 个 50 像 素 高 的 position:fixed 的 导 
航 栏 。 如 果 按 照 浏览 器 自己 的 特性 ， 标 题 就 会 定位 在 这 个 固定 导航 的 下 
面 ， 这 显然 不 是 我 们 想 看 到 的 ， 那 怎么 办 呢 ? 








很 多 人 会 想到 让 标题 栏 设 置 一 个 padding-top:56px ， 但 是 ， 这 种 
影响 布局 的 事情 大 多 数 时 候 只 是 理论 上 可 行 ， 难 道 没有 什么 简单 实用 的 
办 法 吗 ? 这 时 候 ， 我 们 不 妨 试 试 使 用 内 联 元 素 ， 块 级 元 素 设 
置 padding-top:56px 会 影响 布局 ， 但 是 内 联 元 素 不 会 ， 于 是 ， 事 情 就 
简单 了 。 假 设 下 面 是 原来 的 实现 : 





<h3 id="hash"> 标 题 </h3> 
h3 { 
line-height: 36px; 


font-size: 14px; 


} 





则 我 们 可 以 将 其 改 成 : 


<h3><span id="hash"> 标 题 </span></h3> 
h3 { 

line-height: 36pX 

font-size: 14px; 


} 


h3 > span { 
padding-top: 58px; 
} 





这 样 既 不 影响 原来 的 布局 和 定位 ， 同 时 又 把 
http://www.cssword.cn/xxxx/#hash 定位 位 置 往 下 移动 了 50 像 素 ， 
岂 不 美 哉 ! 


虽然 这 不 是 十 全 十 美的 方法 ， 但 是 总 体 性 价 比 还 是 很 不 错 的 。 然 
后 ， 如 果 我 们 的 <h3> 标签 设置 overflow:hidden ， 则 Chrome 和 Firefox 
浏览 器 定位 不 受 影 响 ， 但 是 正 浏 览 器 会 定位 在 <h3> 标签 位 置 ， 这 个 需 


VN 
要 注意 O 


实际 上 ， 对 于 非 蔡 换 元 素 的 内 联 元 素 ， 不 仅 padding 不 会 加 入 行 盒 
高 度 的 计算 ，margin 和 border 也 都 是 如 此 ， 都 是 不 计算 高 度 ， 但 实际 
上 在 内 联 盒 周 围 发 生 了 泻 染 。 





4.2.2 padding 的 百分比 值 


关于 padding 的 属性 值 ， 其 实 没 多 少 好 说 的 。 其 一 ， 和 margin 属 
性 不 同 ，padding 属性 是 不 文 持 负 值 的 ， 其 二 ，padding 文 持 百 分 比 
值 ， 但 是 ， 和 height 等 属性 的 百分比 计算 规则 有 些 差 异 ， 差 异 在 
于 : padding 百分比 值 无 论 是 水 平方 向 还 是 垂直 方 癌 均 是 相对 于 宽度 计 
算 的 ! 











为 何 这 么 设计 呢 ?” 首 先 绝对 和 “ 死 循环 ”无 关 ， 相 对 高 度 计算 其 实 也 
没什么 问题 。 我 个 人 猜想 ， 如 果 垂 直 padding 相对 于 height 计算 ， 大 
多 数 情况 下 计算 值 都 是 9 ， 跟 摆设 没什么 区 别 ， 还 不 如 相对 宽度 计算 ， 
因为 CSS 默 认 的 是 水 平流 ， 计 算 值 一 直 会 有 效 ， 而 且 我 们 还 可 以 利用 这 
一 特性 实现 一 些 有 意思 的 布局 效果 。 也 就 是 面向 场景 和 需求 设计 ， 这 种 
设计 可 以 让 我 们 轻松 实现 自 适 应 的 等 比例 矩形 效果 。 例 如 ， 使 用 


div { padding: 56%; } 


就 可 以 实现 一 个 正方 形 ， 如 果 这 样 : 


div { padding: 25% 56%; } 


就 得 到 了 一 个 宽 高 比 为 2:1 的 矩形 效果 。 

















页 开发 的 时 候 经 常会 有 横贯 整个 屏幕 的 头 图 效果 ， J 
ee 如 200 像 双 高， 屏幕 小 的 时 候 图 片 两 侧 内 容 隐 藏 。 然 而 ， 
种 实现 有 一 个 问题 ， 就 是 类 似 笔 记 本 这 样 的 小 屏幕 ， 头 网 高 度 过 高 会 和 
致 下 面 主 体内 容 可 能 一 屏 都 实现 不 了 ， 但 是 ， 如 果 我 们 使 用 padding 进 
行 等 比例 控制 ， 则 小 屏 磊 下 头 图 高 度 天 然 等 比例 顷 小 ， 没 有 任何 
JavaScript， 却 依然 适 配 良 好 ! 例如 : 





.box { 
padding: 16% 562%; 
position: relative; 


.box > img { 


position: absolute; 
width: 166%; height: 166%; 
left: 8; top: ©@; 

} 





就 实现 了 一 个 宽 高 比 为 5:1 的 比例 固定 的 头 图 效果 ， 上 述 方法 包括 IE6 在 
内 的 浏览 器 都 兼容 。 


有 兴趣 可 以 自己 感受 一 下 ， 手 动 输入 http:/demo.cssworld.cn/4/2- 
3.php 。 改 变 浏 览 器 宽度 即 可 感受 到 等 比例 的 变化 。 





上 面 百 分 比值 是 应 用 在 具有 块 状 特性 的 元 素 上 上 的， 如果 是 内 联 元 
素 ， 会 有 怎样 的 表现 呢 ? 


同样 相对 于 宽度 计算 ; 
默认 的 高 度 和 宽度 细节 有 差 
padding 会 断 行 。 





我 们 先 来 看 一 下 内 联 元 素 的 padding 断 行 ， 代 码 如 下 : 


.box { 
border: 2px dashed #cd6666 ; 


} 
span { 
padding: 562%; 
background-color: gray; 


} 
<span> 内 有 文字 若干 </spany> 





效果 如 图 4-41 所 示 《 截 目 Chrome 浏 览 句 ) 。 表 现 诡异 之 处 有 : “内 
有 ”两 字 不 见 了 , “文字 ”两 字 居 右 显 示 了 ， 背 景区 域 非 矩形 ， 背 景色 宽 
度 和 外 部 容 右 宽度 不 一 致 等 。 











图 4-41 ”内 联 元 素 padding 百分比 值 的 诡异 表现 








CSS 的 很 多 现象 很 难 解释 ， 原 因 在 于 其 表现 往往 是 多 个 属性 多 个 规 
则 一 起 生效 的 结果 ， 并 非 蛙 一 属性 作用 的 结果 。 例 如 这 里 的 例子 ， 虽 然 
几乎 没有 什么 实用 价值 ， 但 是 对 于 我 们 深入 理解 内 联 元 素 的 世界 很 有 帮 
助 。 





对 于 内 联 元 素 ， 其 padding 是 会 断 行 的 ， 也 就 是 padding 区 域 是 跟 
着 内 联 盒 模型 中 的 行 框 盒子 走 的 ， 上 面 的 例子 由 于 文字 比较 多 ， 一 行 显 
示 不 了 ， 于 是 “香干 ?两 字 换 到 了 下 一 行 ， 于 是 ， 原 本 的 padding 区 域 也 

















跟着 一 起 挤 下 来 了 ， 根 据 后 来 居 上 的 层 著 规则 ,“ 内 有 ”两 字 上 自然 就 正好 
被 履 产 ， 于 是 看 不 见 了 ; 同时 ， 规 则 的 矩形 区 域 因为 换行 ， 也 变 成 了 五 
条 边 ; 至 于 宽度 和 外 部 容器 盒子 不 一 样 宽 ， 那 是 目 然 的 ， 如 果 没 有 任何 
文字 内 容 ， 那 自然 宽度 正好 和 容器 一 致 ， 现在 有 “内 有 文字 在 干 " 这 6 个 
字 ， 实 际 宽度 是 容器 宽度 和 这 6 个 字 宽 度 的 总 和 ， 换 行 后 的 宽度 要 想 和 
容器 宽度 一 样 ， 那 可 真 要 靠 极 好 的 人 品 了 。 
































一 分 析 ， 上 面 平时 很 少见 到 的 “诡异 ?现象 就 好 解释 了 。 


事情 还 没完 ， 我 们 再 看 一 个 现象 ， 假 如 是 空 的 内 联 元 素 ， 里 面 没有 
任何 文字 ， 仅 有 一 个 <span> 标签 : 


<span> 内 有 文字 若干 </span> 


此 时 ， 我 们 会 发 现 居然 最 终 背景 区 域 的 宽度 和 高 度 是 不 相等 的 〈 见 
图 4-42) ， 这 不 科学 啊 ! padding:56% 相对 宽度 计算 ， 应 该 出 来 是 个 正 
方形 啊 ， 为 何 高 度 要 高 出 一 截 呢 ? 

















图 4-42” 空 内 联 元 素 padding 百分比 值 高 宽 不 一 


原因 其 实 很 简单 : 内 联 元 素 的 垂直 padding 会 让 “幽灵 空白 节点 ” 显 
现 ， 也 就 是 规范 中 的 “strut” 出 现 。 


知道 了 原因 ， 要 解决 此 问题 就 简单 了 。 由 于 内 联 元 素 默认 的 高 度 完 
全 受 font-size 大 小 控制 ， 因 此 ， 我 们 只 要 : 
span { 


padding: 56%; 
font-size: 0@; 


background-color: gray; 


} 





此 时 ,“ 幽 灵 空 白 节 点 "高度 变 成 了 8 ， 高 和 宽 就 会 一 样 ， 和 块 状 元 
素 一 样 的 正方 形 就 出 现 了 。 


可 以 看 到 ， 内 联合 模型 的 理论 知识 对 我 们 理解 内 联 元 素 的 各 种 表现 
是 非常 有 价值 的 。 这 种 理解 纯 徘 实践 ， 想 破 脑 袋 都 不 会 想 明白 为 什么 会 
这 样 。 所 以 ， 进 行 深度 学 习 是 很 有 必要 的 。 








4.2.3 ”标签 元 素 内 置 的 padding 
说 一 下 你 可 能 不 知道 的 天 于 padding 的 一 些小 秘密 。 


( 1) ol/ul 列 表 内 置 padding-left ， 但 是 单位 是 px 不 是 em 。 例 
如 ，Chrome 浏 览 器 下 是 46px ， 由 于 使 用 的 是 px 这 个 绝对 单位 ， 因 此 ， 
如 果 列 表 中 的 font-size 大 小 很 小 ， 则 <1i> 元 素 的 项 目 符号 《如 点 或 
数字 ) 就 会 <ul>/<01> 元 素 的 左边 缘 距离 很 开 ， 如 果 font-size 比较 
大 ， 则 项 目 符号 可 能 跑 到 <ul>/<ol> 元 素 的 外 面 ， 类 似 图 4-43 所 示 的 情 
况 。 





1. ol/li 元 素 内 置 padding-left ,但 
是 单位 是 px 不 是 em ; 


图 4-43 项目 符号 跑 到 <o1> 外 部 





根据 我 自己 的 经 验 ， 当 font-size 是 12px 至 14px 时 ，22px 是 比 
较 好 的 一 个 padding-left 设 定 值 ， 所 有 浏览 器 都 能 正常 显示 ， 且 非常 
贴近 边缘 。 








ol, ul { 
padding-left: 22px; 





当然 ， 如 果 视 觉 要 求 比较 高 ， 使 用 content 计数 费 模 拟 则 是 更 好 的 





(2) 很 多 表单 元 素 都 内 置 padding ， 例 如 : 


。 所 有 浏览 器 <input>/<textarea> 输入 框 内 置 padding ; 

。 所 有 浏览 器 cbutton> 按钮 内 置 padding ; 

。 部 分 浏览 器 <select> 下 拉 内 置 padding ， 如 Firefox、IE8 及 以 上 版 
本 浏览 器 可 以 设置 padding ; 

。 所 有 浏览 器 cradio>/<chexkbox> 单 复 选 框 无 内 置 padding ; 

。<button> 按钮 元 素 的 padding 最 难 控制 ! 


我 们 着 重 看 一 下 xbutton> 按钮 元 素 的 padding 。 在 Chrome 浏 览 器 
下 ， 我 们 设置 : 


button { padding: 6; } 


按钮 的 padding 就 变 成 了 8 ， 但 是 在 Firefox 浏 览 器 下 ， 左 右 依然 


有 padding ， 如 图 4-44 所 示 。 可 以 试 试 使 用 : 


button::-moz-focus-inner { padding: 6; } 





此 时 按钮 就 会 如 图 4-45 所 示 。 


四 

安 钙 

图 4-44 ”Firefox 按 钮 padding:0 效果 有 限 
按 馈 


图 4-45 ”Firefox 按 钮 padding 去 除 后 的 效果 





而 在 下 7 浏览 器 下 ， 文 字 如 果 变 多 ， 那 么 左右 padding 逐渐 变 大 ， 
如 图 4-46 所 示 。 需 要 进行 如 下 设置 : 





button { overflow: visible; } 





此 时 按钮 表现 符合 预期 ， 如 图 4-47 所 示 。 


”上 胺 钮 按钮 按钮 按钮 | 





图 4-46 ”按钮 文字 越 多 padding 越 大 


按钮 按钮 按钮 按钮 


图 4-47 ”按钮 padding 大 小 不 受 文字 个 数 的 影响 





最 后 ， 按 钮 padding 与 高 度 计 算 不 同 浏览 器 下 于 差 万 别 ， 例 如 : 


button { 
line-height: 26pX; 
padding: 16pX; 


border: none ; 


} 





结果 ， 在 Chrome 浏 览 占 下 是 预期 的 40 像 素 ， 然 而 Firefox 浏 览 器 下 是 英名 
其 妙 的 42 像 素 ， 在 下 7 浏览 器 下 更 是 菲 夷 所 思 的 45 像 素 ， 这 使 我 们 平常 
制作 网 页 的 时 候 很 少 使 用 原生 的 <button> 按钮 作为 点 击 按钮 ， 而 是 使 
用 <a> 标签 来 模拟 。 但 是 ， 在 表单 中 ， 有 时 候 按 钮 是 自 带 交 互 行为 的 ， 
ee 无 法 模拟 的 。 我 这 里 给 大 家 推荐 一 个 既 语义 良好 行为 保 

同时 UI 效果 棒 兼 容 效 果 好 的 实现 小 技巧 ， 那 束 是 使 用 <label> 元 
素 ，HTML 和 CSS 如 下 : 








<button id="btn"></button> 
<label for="btn"> 按 钮 </1label> 


button { 
position: absolute; 
clip: rect(60 60 9 0); 


label { 
display: inline-block; 
line-height: 26pX; 
padding: 16pX; 

} 


| | 

<label> 元 素 的 for 属性 值 和 <button> 元 素 的 id 值 对 应 即 可 。 此 
时 ， 所 有 浏览 器 下 的 按钮 高 度 都 是 40 像 素 ， 而 且 <buttony> 元 素 的 行为 
也 都 保留 了 ， 是 非常 不 错 的 实践 技巧 。 


4.2.4 padding 与 图 形 绘制 


padding 属性 和 background-clip 属性 配合 ， 可 以 在 有 限 的 标签 
下 实现 一 些 CSS 图 形 绘制 效果 ， 我 这 里 抛砖引玉 ， 举 两 个 小 例子 ， 重 在 
展示 可 行 性 。 





例 1: 不 使 用 伪 元 素 ， 仅 一 层 标签 实现 大 队长 的 “三 道 枉 分 类 图 标 
效果 。 此 效果 在 移动 端 比 较 常 见 ， 类 似 于 图 4-48 最 右边 的 小 图 标 。 


图 4-48“ 三 道 杠 ”小 图 标示 意 
我 们 可 以 使 用 类 似 下 面 的 CSS 代 码 〈10 倍 大 小 模拟 ) 实现 : 


.Icon-menu { 
display: inline-block; 
width: 146px; height: 16px; 
padding: 35px 6; 
border-top: 16px solid; 


border-bottom: 16px solid; 
background-color: currentColor.; 
background-clip: content-box; 





例 2: 不 使 用 伪 元 系 ， 仅 一 层 标签 实现 双 层 圆 点 效果 。 此 效果 在 移 


动 端 也 比较 常见 ， 类 似 于 图 4-49， 在 多 个 广告 图 片 切 换 时 ， 用 来 标识 当 
前 显示 的 是 哪 张 图 。 





图 4-49 ” 双 层 圆 点 图 形 示 意 


我 们 可 以 使 用 类 似 下 面 的 CSS 代 码 (10 倍 大 小 模拟 〉 实 现 : 


.Icon-dot { 


下 ， 
可 。 


display: inline-block; 
width: 166px; height: 166pXj 
padding: 16px; 

border: 16px solid; 


border-radius: 506%; 
background-color: currentColor; 
background-clip: content-box; 





这 两 个 例子 实现 的 图 形 效果 如 图 4-50 所 示 。 有 兴趣 可 以 自己 感受 一 
手动 输入 http://demo.cssworld.cn/4/2-4.php 或 者 扫 下 面 的 二 维 码 即 





图 4-50 “三 道生 > 和 双 层 圆 点 图 形 效 果 





4.3 激进 的 margin 属性 





padding 性 格 温 和 ， 人 负责 内 间距 ， 而 margin 则 比较 激进 ， 负 责 外 
间距 。 虽 然 都 是 间距 ， 但 是 差别 相当 大 ， 尤 其 是 margin ， 特 异 之 处 相 
4.3.1 margin 与 元 素 尺 寸 以 及 相关 布局 
1. 元 素 尺 寸 的 相关 概念 

下 面 的 内 容 会 牵扯 到 各 类 包含 “尺寸 ”字样 的 名 词 ， 为 了 大 家 在 阅读 


的 时 候 不 产生 困扰 ， 这 里 专门 把 相关 概念 梳理 一 下 。 


我 们 这 里 的 各 类 “尺寸 "命名 和 对 应 的 盒子 类 型 全 部 参考 自 jQuery 中 
与 尺寸 相关 API 的 名 称 。 





。 元 素 尺寸 : 对 应 jQuery 中 的 $() .width() 和 $() .height() 方法 ， 
包括 padding 和 border ， 也 就 是 元 了 素 的 border box 的 尺寸 。 在 原生 
的 DOM API 中 写作 offsetWidth 和 offsetHeight ， 所 以 ， 有 时 候 
也 成 为 "元素 偏 移 太 寸 ”。 

元 素 内 部 尺寸 ， 对 应 jQuery 中 的 $() .innerwidth() 和 

$() .innerHeight() 方法 ， 表 示 元 素 的 内 部 区 域 尺 寸 ， 包 括 
padding 但 不 包括 border ， 也 就 是 元 素 的 padding box 的 尺寸 。 在 
原生 的 DOM API 中 写作 clientwidth 和 clientHeight ， 所 以 ， 有 
时 候 也 称 为 “元 素 可 视 尺 寸 ”。 

元 素 外 部 尺寸 ， 对 应 jQuery 中 的 $() .outerWidth(true) 和 

$() .outerHeight(true) 方法 ， 表 示 元 素 的 外 部 尺寸 ， 不 仅 包 括 
padding 和 border ， 还 包括 margin ， 也 就 是 元 素 的 margin box 的 
尺寸 。 没 有 相对 应 的 原生 的 DOM API。 





“外 部 尺寸 "有 个 很 不 一 样 的 特性 ， 就 是 尺寸 的 大 小 有 可 能 是 负数 ， 
没 错 ， 负 尺寸 。 这 和 我 们 现实 世界 对 尺寸 的 认 知 明显 冲突 了 ， 因 为 现实 
世界 没有 什么 物体 的 尺寸 是 负 的 。 所 以 ， 我 总 是 把 “外 部 尺寸 ”理解 
为 “元 素 占 据 的 空间 尺寸 "， 把 概念 从 “尺寸 "转换 到 “空间 ”， 这 时 候 束 容 
易 理 解 多 了 。 


2. margin 与 元 素 的 内 部 尺寸 





margin 同样 可 以 改变 元 素 的 可 视 尺 寸 ， 但 是 和 padding 几乎 是 互 
补 态势 。 什 么 意思 呢 ? 对 于 padding ， 元 素 设 定 了 width 或 者 保持 “ 包 
里 性 ”的 时 候 ， 会 改变 元 素 可 视 尺 寸 ， 但 是 对 于 margin 则 相反 ， 元 素 设 
定 了 width 值 或 者 保持 “包裹 性 ”的 时 候 ，margin 对 尺寸 没有 影响 ， 只 
有 元 素 是 “充分 利用 可 用 空间 ”状态 的 时 候 ，margin 才 可 以 改变 元 素 的 
可 视 尺 寸 。 











比方 说 ， 如 下 CSS: 


.father { 
width: 368px; 


margin: 6 -20pX; 
} 














此 时 元 又 宽度 还 是 300 像 素 ， 矿 十 无 变化 。 因 为 只 要 宽度 设 定 ，margin 
就 无 法 改变 元 素 尺 寸 ， 这 和 padding 是 不 一 样 的 。 


但 是 ， 如 果 是 下 面 这 样 的 HTML 和 CSS: 


<div class="father"> 
<div class="son"></div> 
</div> 


.father { width: 366px; } 
.Son { margin: 6 -26px; } 








则 .son 元 素 的 宽度 就 是 340 像 素 了 ， 尺 寸 通过 负 值 设置 变 大 了 ， 因 为 此 
时 的 宽度 表现 是 “充分 利用 可 用 空间 ”。 








或 者 这 么 说 吧 ， 只 要 元 素 的 尺寸 表现 符合 “充分 利用 可 用 空间 ”， 无 
论 是 垂直 方 癌 还 是 水 平方 向 ， 都 可 以 通过 margin 改变 尺寸 。 





CSS 志 界 默认 的 流 方 癌 是 水 平方 向 ， 因 此 ， 对 于 普通 流体 元 
素 ，margin 只 能 改变 元 素 水 平方 向 尺寸 ; 但 是 ， 对 于 具有 拉 伸 特性 的 
绝对 定位 元 素 ， 则 水 平 或 垂直 方向 都 可 以 ， 因 为 此 时 的 尺寸 表现 符 
合 “ 充 分 利用 可 用 空间 ”。 这 在 4.3.4 节 会 继续 深入 。 











由 于 margin 具有 这 种 流体 特性 下 的 改变 尺寸 特性 ， 因 此 ，margin 
可 以 很 方便 地 实现 很 多 流体 布局 效果 。 例 如 ， 一 侧 定 宽 的 两 栏 自 适 应 布 
局 效果 ， 假 设 我 们 定 宽 的 部 分 是 128 像 素 宽 的 图 片 ， 自 适应 的 部 分 是 文 


人 


= 








(1) 如 果 图 片 左 侧 定位 : 


.box { overflow: hidden; } 

.box > img { float: left; } 

.box > p { margin-left: 146px; } 
<div class="box"> 


<img src="1.jpg"> 
<p> 文 字 内 容 .. .</p> 
</div> 








此 时 ， 文 字 内 容 束 会 根据 .box 盒子 的 宽度 变化 而 目 动 排列 ， 形 成 目 适 
应 布局 效果 ， 无 论 盒子 是 200 像 素 还 是 400 像 素 ， 布 局 依然 良好 ， 不 会 像 
纯 浮 动 布局 那样 发 生 错位 。 


(2) 如 果 图 片 右 侧 定位 : 只 要 图 片 的 左 浮动 改 成 右 浮 动 ， 文 字 内 
容 的 左 margin 改 成 右 margin 即 可 。 


.box { overflow: hidden; } 
.box > img { float: right; } 


.box > p { margin-right: 146px; } 





HIML 和 上 面 的 左 侧 定 位 效果 一 模 一 样 ， 最 终 实现 的 也 是 一 个 效果 





民 好 的 上 自 适 应 布局 。 然 而 ， 这 里 的 实现 有 一 点 瑕 症 ， 那 就 是 元 素 在 
DOM 文 档 流 中 的 前 后 顺序 和 视觉 表现 上 的 前 后 顺序 不 一 致 。 什 么 意思 





呢 ? 我 们 这 里 的 图 片 是 右 浮动 ， 视 党 表 现在 .box 的 右 侧 ， 但 是 图 片 相 
关 的 HIML 代 码 却 在 前 面 。 这 个 相反 的 位 置 关 系 有 时 候 会 给 其 他 同事 造 
成 一 些 困难 。 所 以 ， 如 果 想 要 实现 顺序 完美 一 致 的 自 适 应 效果 ， 可 以 借 
助 margin 负 值 定 位 实现 。 








(3) 如 果 图 片 右 侧 定位 ， 同 时 顺序 一 致 ; 


.box { overflow: hidden; } 

.full { width: 166%; float: left; } 

.box > img { float: left; margin-left: -128px; } 
.full > p { margin-right: 146px; } 

<div class="box"> 


<div class="full"> 
<p> 文 字 内 容 .. .</p> 
</div> 
<img src="1.jpg"> 
</div> 





如 果 对 以 上 3 种 实现 效果 有 兴趣 ， 可 以 手动 输入 
http://demo.cssworld.cn/ 4/3-1.php 或 者 扫 右 侧 的 二 维 码 。 





我 们 还 可 以 利用 margin 改变 元 素 尺寸 的 特性 来 实现 两 端 对 齐 布局 
效果 。 列 表 是 我 们 Web 开 发 中 是 非常 常见 的 ， 一 般 都 是 通过 循环 刀 历 呈 
现 出 来 的 ， 也 就 是 实际 上 每 个 列表 的 HTML 样 式 都 是 一 致 的 。 现 在 有 这 
样 一 个 需求 :列表 块 两 端 对 齐 ， 一 行 显示 3 个 ， 中 间 有 2 个 20 像 系 的 间 
辽 。 假 如 我 们 使 用 浮动 来 实现 ，CSS 代 码 可 能 是 下 和 面 这 样 : 








li ft 
float: left; 
width: 166pX; 
margin-right: 28px; 


} 





此 时 就 遇 到 了 一 个 问题 ， 即 最 右 侧 永远 有 个 20 像 素 的 间 阶 ， 无 法 完 
美 实现 两 尊 对 齐 ， 如 图 4-51 所 示 。 


列表 2 列表 3 
7 


返 不 去 的 问 陆 





图 4-51 ” 右 侧 间 际 示意 


如 果 不 考虑 IE8， 我 们 可 以 使 用 CSS3 的 nth-of-type 选择 器 : 


li:nth-of-type(3n) { 
margin-right: 6; 


} 





但 如 果 需 要 兼容 IE8 那 么 nth-of-type 就 无 能 为 力 了 。 要 么 专门 使 
用 JavaScript 打 个 补丁 ， 要 么 列表 HTML 输 出 的 时 候 给 符合 3n 的 <1i> 标 
签 加 个 类 名 。 例 如 .1i-third : 
.1i-third { 


margin-right: ©; 


} 





然而 这 种 技术 选 型 ， 需 要 HTML 逮 辑 和 CSS 样 式 相互 配合 才能 
效 ， 相 比 纯 CSS 控 制 而 言 后 期 风险 和 维护 成 本 提高 了 一 倍 ， 那 有 没有 更 
好 的 实现 方法 呢 ? 


有 ! 我 们 可 以 通过 给 父 容器 添加 margin 属性 ， 增 加 容器 的 可 用 宽 
度 来 实现 。 


ul { 
margin-right: -26px; 
} 
ul > li { 
float: left; 
width: 166px; 
margin-right: 26pX; 


} 





此 时 <ul> 的 宽度 就 相当 于 166%+286px ， 于 是 ， 第 3n 的 <1i> 标签 
的 margin-right: 26px 就 多 了 20 像 素 的 使 用 空间 ， 正 好 列表 的 右边 缘 





就 是 父 级 <ul> 容器 100% 宽 度 位 置 ， 两 端 对 齐 效 果 就 此 实现 了 ， 如 图 4- 
52 所 示 。 


列表 2 列表 3 
7 





父 级 尝 走 间 降 


图 4-52 ” 右 侧 间 隐 被 父 容器 带 走 了 
3. margin 与 元 素 的 外 部 尺寸 


对 于 普通 块 状元 素 ， 在 默认 的 水 平流 下 ，margin 只 能 改变 左右 方 
同 的 内 部 尺寸 ， 垂 直方 同 则 无 法 改变 。 如 果 我 们 使 用 writing-mode 改 
变 流 同 为 垂直 流 ， 则 水 平方 同 内 部 尺寸 无 法 改变 ， 垂 直方 同 可 以 改变 。 
这 是 由 margin:auto 的 计算 规则 决定 的 。 


但 是 ， 对 于 外 部 尺寸 ，margin 属性 的 影响 则 更 为 广泛 ， 只 要 元 素 
具有 块 状 特性 ， 无 论 有 没有 设置 widthVheight ， 无 论 是 水 平方 向 还 是 
垂直 方向 ， 即 使 发 生 了 margin 合并 ，margin 对 外 部 尺寸 都 着 着 实 实 发 
生 了 影响 。 只 是 很 多 时 候 ， 抛 开 定位 而 言 ， 我 们 似乎 对 外 部 尺寸 的 变化 
不 是 很 敏感 ， 实 际 上 ，CSS 世 界 中 不 少 环 手 的 问题 都 是 需要 借助 margin 
的 外 部 尺寸 特性 来 实现 的 。 





前 面 讲 padding 的 时 候 ， 我 们 说 过 它 没 有 什么 兼容 性 问题 。 实 际 
上 ，padding 是 有 不 兼容 的 ， 只 是 这 个 不 兼容 不 常 遇 到 ， 即 使 遇 到 ， 也 
很 容易 被 不 太 敏 感 的 人 “一 笔 带 过 ”"。 此 兼容 问题 描述 为 : 如 果 容 器 可 以 
深 动 ， 在 玉 和 Firefox 浏 览 器 下 是 会 忽略 padding-bottom 值 的 ，Chrome 
等 浏览 右 则 不 会 。 也 就 是 说 ， 在 三 和 Firefox 浏 览 器 下 : 


<div style="height:166pxj padding:56px 6; "> 
<img src="0.jpg" ”height="366"> 


</div> 





底部 没有 50 像 素 的 padding-bottom 间隙 ， 如 图 4-53 所 示 。 





图 4-53 padding-bottom 被 滚动 容器 忽略 





此 兼容 性 差异 的 本 质 区 别 在 于 :_ Chrome 浏览 器 是 子 元 素 超 过 content 
box 尺 寸 触发 滚动 条 显示 ， 而 IE 和 Firefox 浏 览 器 是 超过 padding box 尺 寸 
触发 滚动 条 显示 。 





由 于 规范 中 并 没有 找到 准确 的 说 明 ， 因 此 ， 浏 览 器 之 间 不 同 的 做 法 
不 能 说 谢 对 识 错 ， 可 以 看 成 是 一 种 “未 定义 行为 "。 一 般 而 言 ， 开 发 人 员 
更 喜欢 Chrome 的 做 法 ， 因 为 其 更 好 理解 。 总 之 ， 不 管 怎样 ， 深 动容 器 
压 部 留 白 使 用 padding 是 不 推荐 的 ， 因 为 兼容 性 是 个 大 问题 。 但 是 ,我 
们 可 以 借助 margin 的 外 部 尺寸 特性 来 实现 底部 留 白 ， 代 码 如 下 : 





<div style="height:260px;"> 
<img height="366”style= "margin:56pXx 8; "> 


</div> 





结 末 所 有 浏览 器 都 成 功 留 日 ， 如 图 4-54 所 示 。 





图 4-54 _ margin-bottom 滚动 留 白 





记 住 了 ， 只 能 使 用 子 元 素 的 margin-bottom 来 实现 深 动 容器 的 底 


部 留 日 。 





下 面 再 举 一 个 利用 margin 外 部 尺寸 实现 等 高 布局 的 经 典 案例 。 此 
布局 多 出 现在 分 栏 有 背景 色 或 者 中 间 有 分 隔 线 的 布局 中 ， 有 可 能 左 侧 栏 
内 容 多 ， 也 有 可 能 右 侧 栏 内 容 多 ， 但 无 论 内 容 多 少 ， 两 栏 背景 色 都 和 容 
器 一 样 高 。 








由 于 height:166% 需要 在 父 级 设 定 具体 高 度 值 时 才 有 效 ， 因 此 我 
们 需要 使 用 其 他 技巧 来 实现 。 方 法 其 实 很 多 ， 例 如 使 
用 display:table-cell 布局 ， 左 右 两 栏 作 为 单元 格 处 理 ， 或 者 使 
用 border 边框 来 模拟 ， 再 或 者 使 用 我 们 这 里 的 margin 负 值 实现 ， 核 心 
CSS 代 码 如 下 : 





.Column-box { 
overflow: hidden; 


} 
.Column-left, 
.Column-right { 


margin-bottom: -9999px; 
padding-bottom: 9999px; 





要 看 演示 效果 ， 可 以 手动 输入 http://demo.cssworld.cn/4/3-2.php 或 者 
扫 下 面 的 二 维 码 。 点 击 按钮 增 减 左右 两 栏 的 内 容 改变 高 度 就 会 发 现 ， 无 
论 是 左 侧 内 容 多 还 是 右 侧 内 容 多 ， 两 栏 的 背景 高 度 都 是 一 样 的 ， 如 图 4- 
55 所 示 。 








图 4-55 ”等 高 布局 效果 示意 


下 面 问题 来 了 : 为 什么 可 以 实现 等 高 呢 ? 


垂直 方向 margin 无 法 改变 元 素 的 内 部 尺寸 ， 但 却 能 改变 外 部 尺 

寸 ， 这 里 我 们 设置 了 margin-bottom: -9999px 意味 着 元 素 的 外 部 尺寸 
在 垂直 方向 上 小 了 9999px 。 默 认 情 况 下 ， 重 直方 回 块 级 元 素 上 下 距离 
是 86 ， 一 旦 margin-bottom:-9999px 就 意味 着 后 面 所 有 元 素 和 上 面 元 
素 的 空间 距离 变 成 了 -9999px ， 也 就 是 后 面 元 素 都 往 上 移动 了 9999px 
。 此 时 ， 通 过 神 来 一 笔 padding-bottom:9999px 增加 元 素 高 度 ， 这 正 
负 一 抵消 ， 对 布局 层 并 无 影响 ， 但 却 带 来 了 我 们 需要 的 东西 一 一 视觉 层 
多 了 9999px 高 度 的 可 使 用 的 背景 色 。 但 是 ，9999px 太 大 了 ， 所 以 需要 
配合 父 级 overflow:hidden 把 多 出 来 的 色 块 背景 隐藏 掉 ， 于 是 实现 了 
视觉 上 的 等 高 布局 效果 。 

















使 用 margin 负 值 实现 等 高 布局 的 优势 在 于 兼容 性 足够 ，IE6 浏 览 费 
也 文 持 ， 且 文 持 任意 个 分 栏 等 高 布局 。 本 例 中 ，padding- 
bottom:9999px 也 可 以 用 border-bottom: 9999px solid 
transparent 代 奉 ， 不 过 IE7 以 上 浏览 器 才 文 持 。 大 家 可 以 根据 实际 场 
景 选择 使 用 。 














不 过 ，margin 负 值 实现 等 高 布局 也 有 不 足 之 处 : 首先 ， 如 果 需 要 
有 子 元 素 定 位 到 容器 之 外 ， 父 级 的 overflow:hidden 是 一 个 棘手 的 限 
制 ; 其 次 ， 当 触发 销 点 定位 或 者 使 用 DOM.scrollIntoview() 方法 的 
时 候 ， 可 能 就 会 出 现 奇怪 的 定位 问题 ， 根 本 原因 参见 6.4 节 。 





顺便 说 说 使 用 border 和 table-cell 的 优 缺 点 ， 前 者 优势 在 于 兼 
容 性 好 ， 没 有 销 点 定位 的 隐患 ， 不 足 之 处 在 于 最 多 3 栏 ， 且 由 于 border 





不 文 持 百分比 宽度 ， 因 此 只 能 实现 至 少 一 侧 定 宽 的 布局 ，table-cel1 
的 优点 是 天 然 等 高 ， 不 足 在 于 IE8 及 以 上 版 本 浏览 圳 才 文 持 ， 所 以 ， 如 
果 项 目 无 须 兼 容 IE6、IE7， 则 推荐 使 用 table-cell 实现 等 高 布局 。 





上 述 margin 对 尺寸 的 影响 是 针对 具有 块 状 特性 的 元 素 而 言 的 ， 对 
于 纯 内 联 元 素 则 不 适用 。 和 padding 不 同 ， 内 联 元 素 垂直 方向 的 
margin 是 没有 任何 影响 的 ， 既 不 会 影响 外 部 尺寸 ， 也 不 会 影响 内 部 尺 
寸 ， 有 种 石沉大海 的 感觉 。 对 于 水 平方 向 ， 由 于 内 联 元 素 宽度 表现 
为 “ 包 应 性 ”， 也 不 会 影响 内 部 尺寸 。 








4.3.2 margin 的 百分比 值 


和 padding 属性 一 样 ，margin 的 百分比 值 无 论 是 水 平方 向 还 是 垂 
直方 癌 都 是 相对 于 宽度 计算 的 。 不 过 相对 于 padding ，margin 的 百 分 
比值 的 应 用 价值 就 低 了 一 截 ， 根 本 原因 在 于 和 padding 不 同 ， 元 素 设 
置 margin 在 垂直 方向 上 无 法 改变 元 素 上 自身 的 内 部 尺寸 ， 往 往 需要 父 元 
素 作 为 载体 ， 此 外 ， 由 于 margin 合并 的 存在 ， 垂 直方 向 往往 需要 双 倍 
尺寸 才能 和 padding 表现 一 致 。 例 如 ; 














.box { 
background-color: olive; 
overflow: hidden; 


.box > div { 


margin: 56%; 


} 

<div class="box"> 
<div></div> 

</div> 








结果 .box 是 一 个 宽 高 比 为 2:1 的 橄榄 绿 长 方形 。 是 不 是 有 点 儿 奇 怪 : 


50%+509% 应 该 是 100%， 应 该 上 下 一 样 ， 是 1:1 的 正方 形 ， 怎 么 最 后 是 2:1 
的 长 方形 呢 ? 
这 就 涉及 下 面 一 节 margin 合并 的 内 容 了 。 
4.3.3 ”正确 看 得 CSS 世 界 里 的 margin 合并 
1. 什么 是 margin 合并 


块 级 元 素 的 上 外 边 距 (margin-top ) 与 下 外 边 距 (margin- 
bottom ) 有 时 会 合并 为 单个 外 边 距 ， 这 样 的 现象 称 为 "margin 合并 ”。 
从 此 定义 上 ， 我 们 可 以 捕获 两 点 重要 的 信息 。 








(1) 块 级 元 隶 ， 但 不 包括 浮动 和 绝对 定位 元 系 ， 尽 管 浮动 和 绝对 
定位 可 以 让 元 素 块 状 化 。 





(2) 只 发 生 在 垂直 方向 ， 需 要 注意 的 是 ， 这 种 说 法 在 不 考虑 
writing-mode 的 情况 下 才 是 正确 的 ， 严 格 来 讲 ， 应 该 是 只 发 生 在 和 当 
前 文档 流 方向 的 相 垂直 的 方向 上 。 由 于 默认 文档 流 是 水 平流 ， 因 此 发 
生 margin 合并 的 就 是 垂直 方 同 。 





2. margin 合并 的 3 种 场景 





margin 合并 有 以 下 3 种 场景 。 


(1) 相 令 兄弟 元 素 margin 合并 。 这 是 margin 合并 中 最 常见 、 最 
基本 的 ， 例 如 : 





p { margin: lem 6; } 
<p> 第 一 行 </p> 
<p> 第 二 行 </p> 


[L 


则 第 一 行 和 第 二 行 之 间 的 间距 还 是 lem ， 因 为 第 一 行 的 margin-bottom 
和 第 二 行 的 margin-top 合并 在 一 起 了 ， 并 非 上 下 相 加 。 








(2) 父 级 和 第 一 个 /最 后 一 个 子 元 么 。 我 们 直接 看 例子 ， 在 默认 状 
态 下 ， 下 面 3 种 设置 是 等 效 的 : 


<div class="father"> 
<div class="son" style="margin-top:86px;"></div> 
</div> 


<div class="father" style="margin-top:86px;"> 
<div class="son"></div> 
</div> 


<div class="father" style="margin-top:86px;"> 
<div class="son" style="margin-top:86px;"></div> 
</div> 





在 实际 开发 的 时 候 ， 给 我 们 帝 来 兵 烦 的 多 半 束 是 这 里 的 父 
子 margin 合 


比方 说 ， 现 在 流行 官网 使 用 一 张 籼 帅 的 大 图 ， 然 后 配 上 大 大 的 网 站 
标题 。 由 于 这 个 标题 一 般 在 头 图 中 间 的 某 位 置 ， 因 此 ， 我 们 很 自然 会 想 
到 使 用 margin-top 定位 ， 然 后 问题 就 来 了 。 因 为 发 生 了 “奇怪 ”的 事 
情 ， 头 图 居然 掉 下 来 了 ! 针对 此 现象 ， 我 特意 制作 了 一 个 实例 ， 手 动 输 
入 http://demo.cssworld.cn/ 4/3-3.php 或 者 扫 右 侧 的 二 维 码 。 








问题 产生 的 原因 就 是 这 里 的 父子 margin 合并 。 这 里 大 家 需要 理 清 
楚 “ 合 并 ”这 个 概念 。 如 果 我 们 按照 中 文 释义 理解 ， 应 该 必须 有 多 个 对 象 
才能 进行 合并 ， 人 否则 根本 就 没有 “ 合 ” 这 一 次， 确实 如 此 。 但 是 ， 这 样 理 
解 也 有 可 能 会 带 来 这 样 一 个 误区 ， 即 你 要 出 点 儿 力 ， 我 要 出 点 儿 力 ， 才 
叫 “ 合 ”， 其 实 不 然 。 放 到 我 们 这 里 ， 这 个 父子 margin 合并 的 案例 上 束 
是 : 父 元 素 没 有 出 一 点 力 ， 子 元 素 出 了 全 部 的 力 ， 然 后 最 终 的 margin 
全 部 合 到 了 父 元 素 上 。 世 就 是 虽然 是 在 子 元 素 上 设置 的 margin-top， 
但 实际 上 就 等 同 于 在 父 元 素 上 设置 了 margin-top ， 我 想 这 样 大 家 就 能 
理解 为 何 头 图 会 掉 下 来 了 吧 。 但 是 有 一 点 需要 注意 , “等同 于 ”并 不 
是 “就 是 ”的 意思 ， 我 们 使 用 getComputedSstyle 方法 获取 父 元 素 的 
margin-top 值 还 是 CSS 属 性 中 设置 值 ， 并 非 margin 合并 的 表现 值 。 
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那 该 如 何 阻止 这 里 margin 合并 的 发 生 呢 ? 


对 于 margin-top 合并 ， 可 以 进行 如 下 操作 (满足 一 个 条 件 即 
a 


。 父 元 素 设置 为 块 状 格式 化 上 下 文 元 素 ; 


父 元 素 设置 border-top 值 ; 
父 元 素 设 置 padding-top 值 ; 
父 元 素 和 第 一 个 子 元 素 之 间 添 加 内 联 元 素 进行 分 隔 。 





对 于 margin-bottom 合并 ， 可 以 进行 如 下 操作 (满足 一 个 条 件 即 
可 ) : 


父 元 素 设 置 为 块 状 格式 化 上 下 文 元 素 ; 

父 元 素 设置 border-bottom 值 ; 

父 元 素 设置 padding-bottom 值 ; 

父 元 素 和 最 后 一 个 子 元 素 之 间 添 加 内 联 元 素 进 行 分 隔 ; 
父 元 素 设置 height 、min-height 或 max-height 。 





所 以 ， 上 面 因为 margin 合并 导致 头 图 掉 下 来 的 问题 可 以 添加 下 面 
的 CSS 代 码 进行 修复 : 
.Container { 


overflow: hidden; 


} 





其 原理 就 是 通过 设置 overflow 属性 让 父 级 元 素 块 状 格式 化 上 下 文 ， 这 
在 6.4 节 会 有 深入 的 探讨 。 





说 到 此 处 ， 妨 不 住 再 多 说 几 句 。jQuery 中 有 
个 $().slideUp()/$().slideDown() 方法 ， 如 果 在 使 用 这 个 动画 效果 
的 时 候 ， 发 现 这 内 容 在 动画 开始 或 结束 的 时 候 会 跳 一 下 ， 那 八 九 不 离 十 
就 是 布局 存在 margin 合并 。 跳 动 之 所 以 产生 ， 就 是 因为 jQuery 的 
slideUp 和 slideDown 方法 在 执行 的 时 候 会 被 对 象 元 素 添 





加 overflow:hidden 设置 ， 而 overflow:hidden 会 阻止 mnargin 合 
并 ， 于 是 一 瞬间 间距 变 大 ， 产 生 了 跳动 。 


(3) 空 块 级 元 素 的 margin 合 并 。 例 如 ， 下 面 CSS 和 HTML 代 码 : 


.father { overflow: hidden; } 
.Son { margin: lem 6; } 
<div class="father"> 


<div class="son"></div> 
</div> 











结果 ， 此 时 .father 所 在 的 这 个 父 级 <divy> 元 素 高 度 仅仅 是 lem ， 
为 .son 这 个 空 <div> 元 素 的 margin-top 和 margin-bottom 合并 在 一 
起 了 。 这 也 是 上 一 节 margin:56% 最 终 宽 高 比 是 2:1 的 原因 ， 因 为 垂直 方 
辣 的 上 下 margin 值 合 二 为 一 了 ， 所 以 垂直 方 癌 的 外 部 尺寸 只 有 水 平方 
回 的 一 半 。 











这 种 空 块 级 元 素 的 margin 合并 特性 即使 目 身 没有 设置 margin 也 是 
会 发 生 的 ， 所 谓 “ 合 ”并 不 一 定 要 自己 出 力 ， 只 要 出 人 就 可 以 。 比 方 说 ， 
我 们 一 开始 的 “ 相 邻 兄弟 元 素 margin 合并 ”， 其 实 ， 就 算 兄 弟 不 相 邻 ， 

也 是 可 以 发 生 合并 的 ， 前 提 是 中 间 插 手 的 也 是 个 会 合并 的 家 伙 。 人 比方 
说 : 





pi ‘margin: lem 6; } 
<p> 第 一 行 </p> 


<div></div> 
<p> 第 二 行 </p> 














此 时 第 一 行 和 第 二 行 之 间 的 距离 还 是 lem ， 中 间 看 上 去 隔 了 一 个 <div> 
元 素 ， 但 对 最 终 效果 却 没有 任何 影响 。 如 果 非 要 细 究 ， 则 实际 上 这 里 发 





生 了 3 次 margin 合并 ，<div> 和 第 一 行 <p> 的 margin-bottom 合并 ， 

然后 和 第 二 行 <p> 的 margin-top 合并 ， 这 两 次 合并 是 相 邻 兄弟 合并 。 
由 于 自身 是 空 <div> ， 于 是 前 两 次 合并 的 margin-bottom 和 margin- 
top 再 次 合并 ， 这 次 合并 是 空 块 级 元 素 合 并 ， 于 是 最 终 间距 还 是 1lem 。 








根据 我 多 年 开发 的 经 验 ， 由 于 空 块 级 元 素 的 margin 合并 发 生 不 愉 
快 事情 的 情况 非常 之 少 。 一 来 ， 我 们 很 少 会 在 页 面 上 放置 没什么 用 的 
空 <div> ; 二 来 ， 即 使 使 用 空 <div> 也 是 画 画 分 隔 线 之 类 的 ， 一 般 都 是 
使 用 border 属性 ， 正 好 可 以 阻 断 margin 合并 ; 三 来 ，CSS 开 发 人 员 普 
裔 没有 margin 上 下 同时 开工 的 习惯 ， 比 方 说 一 个 列表 ， 间 距 都 是 一 样 
的 ， 开 发 人 员 一 般 都 是 单独 设 定 margin-top 或 margin-bottom 值 ， 
为 这 会 让 他 们 内 心 觉 得 更 安 人 全。 于是， 最终 ， 空 块 级 元 素 的 margin 合 
并 就 变 成 了 一 个 对 CSS 世 界 有 着 具有 巨大 意义 但 大 多 数 人 都 不 知道 的 特 
性 。 




















如 果 有 人 不 希望 空 <div> 元 素 有 margin 合并 ， 可 以 进行 如 下 操 
作 : 


设置 垂直 方向 的 border ; 

设置 垂直 方 癌 的 padding ; 

里 面 添加 内 联 元 素 〈 直 接 Space 键 空格 是 没 用 的 ) ; 
设置 height 或 者 min-height 。 


3. margin 合并 的 计算 规则 


我 把 margin 合并 的 计算 规则 总结 为 “ 正 正 取 大 值 ”“ 正 负 值 相 加 *“ 负 
负 最 负 值 ”3 句 话 。 下 面 来 分 别 举 例 说 明 。 


(1) 正 正 取 大 值 。 如 果 是 相 邻 兄弟 合并 : 





margin-bottom: 56px; } 
margin-top: 26px; } 


class="a"></a> 
class="b"></a> 





此 时 .a 和 .b 两 个 <div> 之 间 的 间距 是 56px ， 取 大 的 那个 值 。 
如 果 是 父子 合并 : 


.father { margin-top: 26px; } 
.Son { margin-top: 56px; } 
<div class="father"> 

<div class="son"></div> 
</div> 








此 时 .father 元 素 等 同 于 设置 了 margin-top:56px ， 取 大 的 那个 值 。 
如 果 是 自身 合并 : 


.dt 
margin-top: 28px; 
margin-bottom: 56pX; 
} 


<div class="a"></div> 





则 此 时 .a 元素 的 外 部 尺寸 是 586px ， 取 大 的 那个 值 。 


(2) 正 负 值 相 加 。 如 果 是 相 邻 兄弟 合并 : 








.dad { margin-bottom: 56px; } 
.b { margin-top: -26px; } 
<div class="a"></a> 

<div class="b"></a> 


[L 


此 时 .a 和 .b 两 个 <div> 之 间 的 间距 是 38px ， 是 -26px+56px 的 计算 
值 。 


如 果 是 父子 合并 : 


.father { margin-top: -26px; } 
.Son { margin-top: 56px; } 
<div class="father"> 


<div class="son"></div> 
</div> 








此 时 .father 元 素 等 同 于 设置 了 -margin-top:36px ， 是 -26px+56px 
的 计算 值 。 


如 末 是 自身 合并 : 


sa { 
margin-top: -26px; 
margin-bottom: 56pX; 
} 


<div class="a"></div> 





则 此 时 .a 元 素 的 外 部 尺寸 是 38px ， 是 -286px+58px 的 计算 值 。 


(3) 负 负 最 负 值 。 如 果 是 相 邻 兄弟 合并 : 





margin-bottom: -56px; } 
margin-top: -26px; } 


class="a"></a> 
class="b"></a> 





此 时 .a 和 .b 两 个 <div> 之 间 的 间距 是 -58px ， 取 绝对 负 值 最 大 的 值 。 


如 果 是 父子 合并 : 


.father { margin-top: -26px; } 
.Son { margin-top: -56px; } 
<div class="father"> 


<div class="son"></div> 
</div> 








此 时 .father 元 素 等 同 于 设置 了 margin-top:-56px ， 取 绝对 负 值 最 大 
的 值 。 
如 果 是 自身 合并 : 


.aa 
margin-top: -260pX; 
margin-bottom: -56pX; 


} 


<div class="a"></div> 





则 此 时 .a 元 素 的 外 部 尺寸 是 -586px ， 取 绝对 负 值 最 大 的 值 。 
4. margin 合并 的 意义 

我 之 前 曾 见 到 类 似 这 样 的 说 法 : “margin-top 合并 bug。” 这 种 说 法 
是 大 有 问题 的 ，“margin-top 合并 ”这 种 特性 是 故意 这 么 设计 的 ， 在 实 
际 内 容 呈 现 的 时 候 是 有 着 重要 意义 的 ， 根 本 就 不 是 bug! 不 要 遇 到 出 乎 
自己 意料 或 者 自己 无 法 理解 的 现象 就 称 其 为 bug。 








CSS 世 界 的 CSS 属 性 是 为 了 更 好 地 进行 图 文 信息 展示 而 设计 的 ， 博 
客 文 章 或 者 新 闻 信 息 是 图 文 信息 的 典型 代表 ， 基 本 上 离 不 开 下 面 这 些 








HIML: 


<h2> 文 章 标 题 </h2> 
<p> 文 章 段落 1.. .</p> 
<p> 文 章 段落 2.. .</p> 
<U]> 
<1i> 列 表 1</1i> 


<1i> 列 表 2</1i> 
<1i> 列 表 3</1i> 
</ul> 








而 这 里 的 <h2> 、<p> 、<ul> 默认 全 部 都 是 有 垂直 方向 的 margin 值 

的 ， 而 且 单位 全 部 都 是 em 。 首 先 解释 一 下 为 何 需要 margin 值 。 其 实 原 
因 很 简单 ，CSS 世 界 的 设计 本 意 就 是 图 文 信息 展示 ， 有 了 默认 的 margin 
值 ， 我 们 的 文章 、 新 闻 就 不 会 挤 在 一 起 ， 垂 直方 同 就 会 层次 分 明 、 上 段落 
有 致 ， 阅 读 体验 就 会 好 ! 为 何 使 用 em 作为 单位 也 很 好 理解 ， 大 家 应 该 
知道 浏览 器 默认 的 字号 大 小 是 可 以 自 定义 的 吧 ， 例如， 默认 的 是 16 像 

素 ， 假 如 我 们 设置 成 更 大 号 的 字号 ， 同 时 HIML 标 和 俭 的 margin 是 像素 
大 小 ， 则 会 发 生 文 字 变 大 但 是 间距 不 变 的 情况 ， 原 本 段落 有 致 的 阅读 体 
验 必 然 又 会 变 得 令 人 室 恩 。em 作为 相对 单位 ， 则 可 以 让 我 们 的 文章 或 
新 闻 无 论 多 大 的 字体 都 排版 良好 。 可 以 看 到 ，HTML 标 签 默认 内 置 的 

CSS 属 性 值 完全 就 是 为 了 更 好 地 进行 图 文 信息 展示 而 设计 的 。 



































我 们 平时 进行 网 站 开发 的 时 候 都 会 重 置 各 种 默认 的 margin 尺寸 ， 
这 是 件 需要 好 好 审视 的 事情 ， 对 于 绝 大 多 数 网 站 ， 确 实 需 要 做 这 样 的 处 
理 ， 因 为 这 些 网 站 鲜 有 传统 的 图 文 信息 展示 区 域 。 但 是 ， 如 果 你 的 站 点 
征 博客 、 新 闻 门 户 或 公众 号 文章 ， 我 们 应 该 做 的 是 统一 标签 的 margin 
大 小 ， 而 不 是 一 股 脑 地 重 置 成 8 。 














下 面 说 说 margin 合并 的 意义 。 对 于 兄弟 元 素 的 margin 合并 其 作用 
和 em 类 似 ， 都 是 让 图 文 信息 的 排版 更 加 舒服 自然 。 假 如 说 没有 margin 
合并 这 种 说 法 ， 那 么 连续 段落 或 列表 之 类 首尾 项 间距 会 和 其 他 兄弟 标签 
成 1:2 关 系 ; 文章 标题 距离 顶部 会 很 近 ， 而 和 下 面 的 文章 详情 内 容 距 离 
又 会 很 开 ， 就 会 造成 内 容 上 下 间距 不 一 致 的 情况 。 这 些 都 是 糟糕 的 排版 
体验 。 而 合并 机 制 可 以 保证 元 素 上 下 间距 一 致 ， 无 论 是 <h2> 标题 这 种 
margin 偏 大 的 元 素 ， 还 是 中 规 中 算 的 <p> 元 素 ， 因 为 “ 正 正 取 大 值 ”。 














父子 margin 合并 的 意义 在 于 : 在 页 面 中 任何 地 方 租 套 或 直接 放 入 
任何 裸 <div> ， 孝 不 会 影响 原来 的 块 状 布局 。<div> 是 网 页 布局 中 非常 
常用 的 一 个 元 素 ， 其 语义 是 没有 语义 ， 也 就 是 不 代表 任何 特定 类 型 的 内 
容 ， 是 一 个 通用 型 的 具有 流体 特性 的 容器 ， 可 以 用 来 分 组 或 分 隔 。 由 于 
其 作用 就 是 分 组 的 ， 因 此 ， 从 行为 表现 上 来 看 ， 一 个 纯粹 的 <div> 元 系 
古 不 能 够 也 不 可 以 影响 原先 的 布局 的 。 现 在 有 如 下 一 段 HTML: 








<div style="margin-top:286px;"></div> 





请 问 : 现在 要 在 上 面 这 段 HTML 的 外 面 再 垦 套 一 层 <div> 元 素 ， 假 如 说 
现在 没有 父子 margin 合并 ， 那 这 层 新 散 套 的 <div> 己 不 阻 断 了 原本 的 
兄弟 margin 合并 ? 很 有 可 能 间距 就 会 变 大 ， 受 受 地 影响 了 原来 的 布 
局 ， 这 显然 就 违背 了 <divy> 的 设计 作用 了 。 所 以 才 有 了 父子 margin 合 
并 ， 外 面 再 藤 套 一 层 <div> 元 素 就 跟 没 藤 套 一 样 ， 表 现 为 margin- 
top:26px 就 好 像 是 设置 在 最 外 面 的 <div> 元 素 上 一 样 。 

















目 身 margin 合并 的 意义 在 于 可 以 避免 不 小 心 遗 落 或 者 生成 的 空 标 
签 影响 排版 和 布局 。 例 如 : 


<p> 第 一 行 </p> 
<p></p> 
<p></p> 





<p></p> 
<p></p> 
<p> 第 二 行 </p> 








其 和 下 面 这 段 HTML 最 终 视觉 效果 是 一 模 一 样 的 : 


<p> 第 一 行 </p> 





<p> 第 二 行 </p> 





若是 没有 自身 margin 合并 特性 的 话 ， 怕 是 上 面 的 HTML 第 一 行 和 
第 二 行 之 间 要 隔 了 很 多 行 吧 ，。 








知道 了 margin 合并 的 意义 以 及 作用 ， 而 且 合 并 规则 的 兼容 性 良 
好 ， 所 以 ， 我 自己 平时 网 页 制作 的 时 候 ， 遇 到 列表 或 者 模块 ， 全 部 都 是 
保留 上 下 margin 设置 。 例 如 : 


.list { 


margin-top: 15px; 
margin-bottom: 15px; 


} 





而 不 是 战 战 闫 静 地 使 用 : 


.list { 
margin-top: 15px; 


} 








因为 margin 合并 特性 ， 所 以 我 们 无 须 担 心 列表 之 间 的 间距 会 很 
大 。 不 会 的 ， 就 是 15px ! 相反 ， 这 种 设置 让 我 们 的 页 面 结构 容 错 性 更 


强 了 ， 比 方 说 最 后 一 个 元 素 移 除 或 位 置 调换 ， 均 不 会 破坏 原来 的 布局 ， 
也 就 是 我 们 的 CSS 无 须 做 任何 调整 。 


4.3.4 ”深入 理解 CSS 中 的 margin:auto 


下 面 讲 讲 margin:auto 的 作用 机 制 。 首 先 ， 我 们 需要 知道 下 面 这 





(1) 有 时 候 元 素 就 算 没 有 设置 width 或 height ， 也 会 自动 填充 。 
例如 : 


此 <div> 宽度 束 会 日 动 填 满 容器 。 











(2) 有 时 候 元 素 就 算 没 有 设置 width 或 height ， 也 会 自动 填充 对 
应 的 方位 。 例 如 : 


div { 
position: absolute; 


left: 8; right: 6; 
} 








此 时 <div> 宽度 就 会 自动 填 满 包含 块 容器 。 


此 时 ， 如 果 设 置 width 或 height ， 自 动 填充 特性 就 会 被 覆盖 。 例 
如 : 


div { width: 266px; } 





此 时 ，<divy> 宽度 被 限制 成 了 268px ， 无 法 自动 填充 外 部 容器 的 可 用 宽 
度 了 。 


假设 外 部 的 容器 宽度 是 366px ， 则 有 166px 的 宽度 原本 应 该 自动 填 
满 的 ， 现 在 因为 width 设置 而 闲置 ， 而 margin:auto 就 是 为 了 填充 这 
个 闲置 的 尺寸 而 设计 的 ! 


margin:auto 的 填充 规则 如 下 。 
(1) 如 果 一 侧 定 值 ， 一 侧 auto ， 则 auto 为 剩余 空间 大 小 。 


(2) 如 果 两 侧 均 是 auto ， 则 平分 剩余 空间 。 








上 面 这 两 条 规则 中 第 二 条 可 能 大 家 都 知道 ， 但 古 第 一 条 怕 是 知道 的 
人 就 不 多 了 。 我 们 来 看 一 个 例子 : 





.father { 
width: 366pX; 
} 


.Son { 


width: 266px; 
margin-right: 86px; 
margin-left: auto; 





请 问 : 此 时 .son 的 左右 边 距 计 算 值 是 多 少 ? 


如 果 是 对 margin:auto 没有 一 定 深 入 了 解 的 人 ， 可 能 会 认为 左边 
距 6、 右边 距 166px ， 实 际 上 不 是 的 ， 应 该 是 左边 距 26px 、 右 边 距 
86px 。margin 的 "auto' 可 不 是 摆设 ， 是 具有 强烈 的 计算 意味 的 关键 
字 ， 用 来 计算 元 素 对 应 方向 应 该 获得 的 剩余 间距 大 小 。 璧 如 这 里 ， 总 剩 








余 间 距 大 小 是 16e8 px ， 其 中 margin-right 使 用 了 88@ px ， 那 自 
然 margin-left 的 'auto' 计算 值 就 是 剩余 的 28px 了 。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/3-4.php 或 者 扫 右 侧 的 
二 维 码 。 效 果 如 图 4-56 所 示 。 


由 于 CSS 世 界 中 margin 的 初始 值 大 小 是 ， 因 此 ， 上 面 的 例子 如 果 
margin-right 缺失 ， 实 现 的 效 末 正好 是 块 级 元 聚 的 右 对 齐 效果 。 也 就 


.SOn { 
width: 266pX; 
margin-left: auto; 


} 





效果 如 图 4-57 所 示 。 








图 4-56 ” margin 单 侧 值 为 auto 表现 示意 











图 4-57 _ margin-left:auto 实现 的 右 对 齐 效果 





所 以 ， 如 果 想 让 某 个 块 状元 素 右 对 齐 ， 脑 子 里 不 要 就 一 
个 float:right ， 很 多 时 候 ，margin-left:auto 才 是 最 佳 的 实践 ， 
浮动 毕竟 是 个 “小 魔鬼 ”。 我 甚至 可 以 这 么 说 : margin 属性 的 auto 计算 
就 是 为 块 级 元 兹 左 中 右 对 齐 而 设计 的 ， 和 内 联 元 素 使 用 text-align 控 
制 左 中 右 对 齐 正 好 遥相呼应 ! 











居中 对 齐 左右 同时 auto 计算 即 可 ，CSS 如 下 : 


.Son { 
width: 266px; 
margin-right: auto; 


margin-left: auto; 


} 








此 时 ， 左 右边 距 都 是 56px ， 因 为 对 立方 同 都 是 auto 的 时 候 剩余 间距 等 
分 ， 所 以 左右 间距 一 样 ， 形 成 居中 效果 。 


虽然 知道 了 margin:auto 的 计算 规则 ， 但 有 人 还 是 会 有 一 些 疑 
问 ， 比 方 说 : 为 什么 明明 容器 定 高 、 元 素 定 高 ，margin:auto 却 无 法 
垂直 居中 ? 








.father { 
height: 266pX; 
} 


.Son { 


height: 166px; 
margin: auto; 


} 





原因 在 于 触发 mnargin:auto 计算 有 一 个 前 提 条 件 ， 就 是 width 
或 height 为 auto 时 ， 元 素 是 具有 对 应 方向 的 自动 填充 特性 的 。 比 方 说 
这 里 ， 假 如 说 把 .son 元 素 的 height:166px 去 掉 ，.son 的 高 度 会 自动 
和 父 元 素 等 高 变 成 286px 吗 ? 显然 不 会 ! 因此 无 法 触发 nargin:auto 
计算 ， 故 而 无 法 垂直 居中 。 








可 能 有 人 叉 会 问 了 : 我 们 垂直 方 同 margin 无 法 实现 居中 了 吗 ? 当 
然 是 可 以 的 ， 而 且 场 景 还 不 止 一 种 。 





第 一 种 方法 是 使 用 writing-mode 改变 文档 流 的 方向 : 


.father { 
height: 266pX; 
writing-mode: vertical-lr; 


} 

.Son { 
height: 166px; 
margin: auto; 


} 





此 时 .son 就 是 垂直 居中 对 齐 的 ， 但 是 这 也 带 来 另外 的 问题 ， 就 是 水 平 
方向 无 法 auto 居中 了 。 





所 以 ， 有 人 会 关心 有 没有 让 水 平 牌 直 同 时 居中 的 方法 。 有 ， 就 是 这 


里 要 提 的 第 二 种 方法 ， 绝 对 定位 元 素 的 margin:auto 大 中。 下 面 我 们 
边 解 释 为 何 居 中 边 展示 效果 。 首 先 ， 下 面 的 CSS 代 码 : 


.father { 
width: 366pxj height:1586px; 
position: relative; 


} 
.Son { 
position: absolute; 
top: 6; right: 6; bottom: 6;j left: ©; 








此 时 .son 这 个 元 么 的 矿 寸 表现 为 "格式 化 宽度 和 格式 化 高 度 ”， 和 <div> 
的 “下 第 法 完 度 ” 一 样 ， 同 属于 外 部 尺寸 ， 也 就 是 尺寸 自动 填充 父 级 元 素 
的 可 用 尺寸 ， 此 时 我 们 给 .son 设置 尺寸 。 例 如 : 








.Son { 
position: absolute; 
top: 6; right: 6; bottom: 6;j left: ©; 
width: 266px; height: 166pX; 








此 时 筑 高 被 限制 ， 原 本 应 该 填充 的 空间 就 被 空余 了 出 来 ， 这 多 余 的 
空间 就 是 margin:auto 计算 的 空间 ， 因 此 ， 如 果 这 时 候 我 们 再 设置 一 
个 margin:auto : 

.SOn { 


position: absolute; 
top: 6; right: 6; bottom: 6;j left: ©; 


width: 266px; height: 166pX; 
margin: auto; 

















那么 我 们 这 个 .son 元素 就 水 平方 同和 季 直 方 同 同时 居中 了 。 因 为 auto 


正好 把 上 下 左右 剩余 空间 全 部 等 分 了 ， 自 然 就 居中 ， 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/4/3-5.php 或 者 扫 下 面 的 
二 维 码 。 效 果 如 图 4-58 所 示 。 








图 4-58 ”绝对 定位 元 素 下 的 margin:auto 居中 对 齐 效果 


由 于 绝对 定位 元 素 的 格式 化 高 度 即 使 父 元 素 height:auto 也 是 支 
持 的 ， 因 此 ， 其 应 用 场景 可 以 相当 广泛 ， 可 能 唯一 的 不 足 就 是 此 居中 计 
算 IE8 及 以 上 版 本 浏览 器 才 支 持 。 至 少 对 我 来 讲 ， 如 果 项 目 无 须 兼容 IE7 
浏览 器 ， 绝 对 定位 下 的 margin:auto 居中 是 我 用 得 最 频繁 的 块 级 元 素 
重 直 居中 对 齐 方式 ， 比 top:56% 然后 margin 负 一 半 元 素 高 度 的 方法 要 
好 使 得 多 。 








最 后 ， 还 有 一 个 大 家 可 能 关心 的 问题 ， 假 如 说 这 里 面 的 元 素 尺 寸 比 
外 面 的 大 ， 那 这 个 auto 该 怎么 计算 呢 ? 








很 简单 ， 如 果 里 面 元 素 矿 寸 大 ， 说 明 剩 余 可 用 空间 都 没有 了 ， 会 被 


当 作 8 来 处 理 ， 也 就 是 auto 会 被 计算 成 6 ， 其 实 就 等 于 没有 设 
置 margin 属性 值 ， 因 为 margin 的 初始 值 就 是 8 。 





另外 ， 对 于 蔡 换 元 素 ， 如 果 我 们 设置 display:b1lock ， 
则 margin:auto 的 计算 规则 同样 适合 。 


4.3.5 margin 无 效 情形 解析 


因为 margin 属性 的 诸多 特 卉 性 ， 所 以 ， 我 们 在 实际 开发 的 时 候 ， 
经 常会 遇 到 设置 的 margin 无 效 的 情形 ， 这 里 我 罗列 一 下 ， 希望 大 家 过 
到 类 似 的 问题 知道 原因 以 及 如 何 对 症 下 药 。 


(1) display 计算 值 jnline 的 非 蔡 换 元 素 的 垂直 margin 是 无 效 
的 ， 虽 然 规 范 提 到 有 泻 染 ， 但 浏览 器 表现 却 未 寻 得 一 点 踪迹 ， 这 和 
padding 是 有 明显 区 别 的 。 对 于 内 联 蔡 换 元 素 ， 牌 直 margin 有 效 ， 并 
且 没 有 margin 合并 的 问题 ， 所 以 图 片 永远 不 会 发 生 margin 合并 。 











(2) 表格 中 的 <tr> 和 <td> 元 素 或 者 设置 display 计算 值 
是 table-cell 或 table-row 的 元 素 的 margin 都 是 无 效 的 。 但 是 ， 如 
果 计 算 值 是 table-caption 、table 或 者 ijnline-table 则 没有 此 问 
题 ， 可 以 通过 margin 控制 外 间距 ， 甚 至 : :first-letter 伪 元 素 也 可 
以 解析 margin 。 


(3) margin 合并 的 时 候 ， 更 改 margin 值 可 能 是 没有 效果 的 。 以 
父子 margin 重 登 为 例 ， 假 设 父 元 素 设 置 有 margin-top:56px ， 则 此 时 
子 元 素 设 置 margin-top:36px 就 没有 任何 效果 表现 ， 除 非 大 小 比 58px 
大 ， 或 者 是 负 值 。 








(4) 绝对 定位 元 素 非 定 位 方位 的 margin 值 “ 无 效 "”。 什 么 意思 呢 ? 
很 多 时 候 ， 我 们 对 元 素 进 行 绝 对 定位 的 时 候 ， 只 会 设置 1 一 2 个 相 邻 方 
位 。 例 如 : 











img { top: 16%; left: 36%;} 











此 时 right 和 bottom 值 属于 auto 状态 ， 也 就 是 右 侧 和 底部 没有 进行 定 
位 ， 此 时 ， 这 两 个 方向 设置 margin 值 我 们 在 页 面 上 是 看 不 到 定位 变化 
的 。 例 如 : 





img { 
top: 16%; left: 306%; 


margin-right: 36px; 
} 








此 时 margin-right:36px 几乎 就 是 摆设 。 是 margin 没 起 作用 吗 ? 实际 
上 不 是 的 ， 绝 对 定位 元 素 任 意 方 位 的 margin 值 无 论 在 什么 场景 下 都 一 
直 有 效 。 壁 如 这 个 例子 ， 假 设 cimg> 宽度 76% ， 同 时 父 元 素 是 具有 定位 
属性 ， 且 overflow 设置 为 auto 的 元 素 ， 则 此 时 就 会 出 现 水 平 滚动 条 ， 
因为 margin-right:36px 增加 了 图 片 的 外 部 尺寸 。 

















rs 一 般 情况 下 没有 效果 呢 ? 主 要 是 因为 绝对 定位 元 素 的 泻 染 
是 独立 的 ， 普 通 元 素 和 兄弟 元 素 是 心 连 心 ， 你 动 我 也 动 ， 但 是 绝对 定位 
a 译 ， 因 此 ，margin 无 法 影响 
兄弟 元 素 定位 ， 所 以 看 上 去 就 “无 效 ”。 











(5) 定 高 容器 的 子 元 素 的 margin-bottom 或 者 宽度 定 死 的 子 元 素 
的 margin-right 的 定位 “失效 ”。 


我 们 先 看 例子 : 


<div class="box"> 
<div class="child"></div> 
</div> 
.box { 
height: 166px; 


} 
.Child { 
height: 86pX; 
margin-bottom: 106pX; 
} 





这 里 ，margin-bottom:166px 是 不 会 在 容器 抵 部 形成 68px 的 外 间距 
的 ， 看 上 去 就 像 是 “失效 ”一 样 ， 同 样 的 HTML，CSS 代 码 如 下 : 
.box { 

width: 166px; 


} 
.child { 


width: 86px; 
margin-right: 1660pX; 





此 时 ，margin-right:166px 对 元 素 的 定位 也 没有 任何 影响 ， 给 人 “无 
效 ” 的 感觉 ， 实 际 上 ， 这 个 现象 的 本 质 和 上 面 绝 对 定位 元 素 非 对 立方 
位 margin 值 “ 无 效 " 类 似 。 原 因 在 于 ， 知 想 使 用 margin 属性 改变 自身 的 
人 位置， 必须 是 和 当前 元 素 定 位 方向 一 样 的 margin 属性 才 可 以 ， 否 

则 ，margin 只 能 影响 后 面 的 元 素 或 者 父 元 素 。 


























例如 ， 一 个 普通 元 素 ， 在 默认 流下 ， 其 定位 方向 是 左 侧 以 及 上 方 ， 
此 时 只 有 margin-left 和 margin-top 可 以 影响 元 素 的 定位 。 但 是 ， 如 
果 通 过 一 些 属 性 改变 了 定位 方向 ， 如 float :right 或 者 绝对 定位 元 素 














的 right 右 侧 定位 ， 则 反 过 来 margin-right 可 以 影响 元 素 的 定 
位 ，margin-left 只 能 影响 兄弟 元 素 。 











在 本 例 中 ， 父 容 右 只 有 一 个 子 元 素 ， 因 此 没有 影响 兄 加 元 素 的 说 
法 ， 加 上 有 要么 定 宽 要 么 定 遍 ， 右 侧 和 底部 无 margin 重 登 ， 因 此 外 部 的 
元 素 也 不 会 有 任何 布局 上 的 影响 ， 因 此 就 给 人 “无 效 " 的 错觉 ， 实 际 上 
古 margin 目 身 的 特性 导致 ， 有 演 染 只 是 你 看 不 到 变化 而 已 。 





(6) 著 长 英 及 导致 的 margin 无 效 。 我 们 直接 看 下 面 这 个 例子 : 


<div class="box"> 
<img src="mm1.jpg"> 
<p> 内 容 </p> 

</div> 





.box > img { 
float: left; 


width: 256pX; 
} 
.box > pi 
overflow: hidden; 
margin-left: 266px; 
} 





其 中 的 margin-left:268px 是 无 效 的 ， 准 确 地 讲 ， 此 时 的 <p> 的 
margin-left 从 负 无 穷 到 256px 都 是 没有 任何 效果 的 。 要 解释 这 里 为 
何 会 无 效 ， 需 要 对 float 和 overflow 深入 理解 ， 而 这 两 个 属性 都 是 后 
面 的 内 容 ， 因 此 ， 深 入 原因 分 析 我 们 将 在 6.4 市 介绍 。 


(7) 内 联 特性 导致 的 margin 无 效 。 我 们 直接 看 下 面 这 个 例子 : 





<div class="box"> 
<img src="mm1.jpg"> 
</div> 


.box > img { 
height: 96px; 
margin-top: -266px; 
} 








这 里 的 例子 也 很 有 代表 性 。 一 个 容器 里 面 有 一 个 图 片 ， 然 后 这 张 图 
片 设置 margin-top 负 值 ， 让 图 片上 偏 移 。 但 是 ， 随 着 我 们 的 负 值 越 来 
越 负 ， 结 果 达 到 某 一 个 具体 负 值 的 时 候 ， 图 片 不 再 往 上 偏 移 了 。 人 比方 
说 ， 本 例 margin-top 设置 的 是 -269px ， 如 果 此 时 把 margin-top 设置 
成 -366px ， 图 片 会 再 往 上 偏 移 168px 吗 ? 不 会 ! 它 会 微 丝 不 
动 ，margin-top 变 得 无 效 了 。 要 解释 这 里 为 何 会 无 效 ， 需 要 对 
vertical-align 和 内 联 盒 模型 有 深入 的 理解 ， 而 这 vertical-align 
是 后 面 的 内 容 ， 因 此 ， 深 入 原因 分 析 我 们 将 在 5.3 节 介绍 。 这 里 大 家 先 
记 住 有 这 么 一 个 margin 失效 的 场景 即 可 。 





4.4 功勋 里 越 的 border 属性 


顾名思义 ，border 就 是 “边框 ?， 从 名 字 就 可 以 看 出 来 CSS 设 计 者 
设计 此 属性 的 目的 就 是 给 元 素 弄 个 边框 什么 的 。 但 是 ，CSS 世 界 中 很 多 
大 受 欢迎 的 属性 之 所 以 受 欢 迎 ， 并 不 是 因为 其 本 职工 作 做 得 很 好 ， 而 是 
衍生 出 来 的 特性 可 以 用 来 解雇 很 多 未 手 的 问题 。border 属性 就 是 典型 
代表 之 一 。 我 总 是 称赞 porder “功勋 章 越 ?， 正 是 因为 border 属性 在 图 
形 构建 、 体 验 优化 以 及 网 页 布局 这 块 几 大 放 红 彩 ， 同 时 保证 其 恨 好 的 兼 
容 性 和 稳定 的 特性 表现 才 得 此 荣耀 的 ， 如 果 就 老 老 实 实 画 个 框框 ， 就 不 
可 能 称赞 它 “ 功 勋 卓越 。 








下 面 我 们 一 起 看 看 border 都 有 哪些 精彩 的 特性 表现 。 


4.4.1 为 什么 border-width 不 支持 百分比 值 


虽然 同属 盒 模型 基本 成 员 ， 但 是 porder-width 却 不 文 持 百分比 。 
例如 ， 设置 : 


div { border-width: 56%; } 


是 无 效 的 ， 直 接 声 明 无 效 。 这 一 点 和 margin 和 padding 都 不 一 样 ， 下 
面 问题 来 了 : 为 什么 border-width 不 支持 百分比 呢 ? 








有 人 说 不 好 解析 、 不 好 表现 。 在 我 看 来 ， 是 没有 这 个 问题 的 ， 直 接 
和 margin 和 padding 一 样 ， 全 部 相对 于 宽度 计算 就 好 了 ， 没 有 任何 泻 
染 上 的 难度 。 之 所 以 不 支持 ， 在 我 看 来 是 语义 和 使 用 场景 决定 的 。 





首先 看 语义 。 顾 名 思 义 ，border-width 是 “边框 宽度 ”， 我 们 先 来 
看 看 现实 世界 的 物体 的 边框 ， 假 设 我 们 现在 有 两 台数 码 设备 ， 分 别 是 
iMac 和 iPhone， 很 显然 ， 这 两 台 设 备 的 尺寸 差异 很 大 ， 但 是 ， 大 家 仔细 
对 比 驶 会 有 发现， 这 两 者 的 边框 大 小 差别 跟 屏 幕 设备 相 比 较 而 言 就 可 以 忽 
略 不 计 了 。 看 到 没 ， 所 谓 * 边 框 ?， 是 不 会 因为 设备 大 就 按 比 例 变 大 的 。 
因此 ， 如 果 支 持 百 分 比值 ， 是 不 是 就 意味 着 设备 大 了 边框 也 跟着 变 大 ? 
这 显然 不 合 “ 边 框 ”* 的 语义 嘛 ! 然后 再 看 使 用 场景 ， 虽 然 说 如 果 border- 
width 支持 百分比 值 布局 什么 的 能 做 的 事情 就 更 多 了 ， 但 是 ， 我 们 要 想 
到 CSS 世 界 创造 的 背景 主要 是 为 图 文 展示 服务 的 ， 有 一 张 图 片 ， 大 户 区 
域 都 是 白色 的 ， 在 白 底 背景 上 和 文字 混在 一 起 ， 就 会 有 一 片 奇怪 的 空白 
区 域 ， 会 让 人 产生 没 对 齐 的 假象 ， 此 时 ， 我 们 给 这 张 图 片 套 个 1px 灰色 
边框 ， 区 域 就 明显 了 ， 对 吧 ! 设计 的 初衷 就 是 为 了 这 么 点 儿 事 ， 没 有 需 
要 使 用 百分比 值 的 场景 。 于 是 ， 综 合 这 两 点 ， 造 成 了 border-width 不 


























支持 百分比 值 。 


其 实 还 有 很 多 CSS 属 性 ， 如 outline 、box-shadow 、text- 
shadow 等 ， 都 是 不 支持 百分比 值 的 ， 原 因 也 与 此 类 似 。 


我 们 平常 使 用 border-width 几乎 全 是 固定 的 数值 ， 如 border- 
width:1px 之 类 ， 但是， 可 能 有 些 人 并 不 知道 border-width 还 文 持 知 
干 关键 字 ， 包 括 thin 、medium (默认 值 ) 和 thick ， 对 应 的 尺寸 大 小 
具体 如 下 。 


。thin : 注 注 的 ， 等 同 于 1px 。 
。medium (默认 值 ) : 薄 厚 均匀 ， 等 同 于 3px 。 
。 thick : 厚 厚 的 ， 等 同 于 4px 。 





不 知道 大 家 有 没有 想 过 这 么 一 个 问题 ， 为 什么 border 属性 的 默认 
宽度 大 小 是 medium ， 也 就 是 3px ， 明 明 thin (1px ) 宽度 更 第 用 吧 ? 


为 什么 呢 ? 因为 ..…..border-style:double 至 少 3px 才 有 效 
果 ! op . .double ? 我 好 像 只 知道 solid 、dashed 和 
dotted ， 这 double 是 个 什么 ? 


下 面 我 们 一 起 看 看 border-style 的 一 些 有 趣 的 故事 。 


4.4.2 了 解 各 种 border-style 类 型 


1. border-style:none 


注意 ，border-style 的 默认 值 是 none ， 有 一 部 分 人 可 能 会 误 以 
为 是 solid 。 这 也 是 单纯 设置 border-width 或 border-color 没有 边 





框 显 示 的 原因 ， 如 下 示意 : 





div { border: 16px; } /* 无 边框 出 现 */ 
div { border: red; } /* 无 边框 出 现 */ 





如 果 是 border-style 类 型 值 则 边框 出 现 。 例 如 ， 下 面 CSS 会 出 现 3 
像素 宽 的 边框 : 





div { border: solid; } /* 有 边框 出 现 */ 








平时 我 们 使 用 border-style:none 多 出 现在 重 置 边 框 样式 的 时 
候 ， 例 如 ， 实 现 一 个 没有 下 边框 的 边框 效果 : 


div { 
border: 1px solid; 


border-bottom: none; 


} 





当然 ， 我 们 也 可 以 通过 下 接 设置 边框 宽度 为 6 进行 重 置 : 


div { 
border: 1px solid; 
border-bottom: ©; 
} 








当然 ， 如 果 你 是 一 个 “性 能 控 ?， 可 以 两 个 一 起 写 ， 根 据 前 奉 的 训 
试 ， 这 样 写 渔 染 性 能 最 高 : 





div { 
border: 1px solid; 
border-bottom: 6 none; 


} 


[L 


2. border-style:solid 
这 个 大 家 耳熟能详 ， 妇 掺 缘 知 ， 实 线 边框 ， 没 什么 好 说 的 。 
3. border-style:dashed 


虚线 边框 可 以 说 是 使 用 频率 第 二 高 的 边框 类 型 了 ， 人 至 于 使 用 没什么 
好 说 的 ， 倒 是 这 边框 本 身 的 一 些 泻 染 数 据 挺 有 意思 。 这 虚线 颜色 区 的 宽 
高 比 以 及 颜色 区 和 透明 区 的 宽度 比例 在 不 同 浏 览 器 下 是 有 差异 的 。 例 
如 ， 在 Chrome 和 Firefox 浏 览 器 下 ， 颜 色 区 的 宽 高 比 是 3:1， 颜 色 区 和 透 
明 区 的 宽度 比例 是 11， 如 图 4-59 所 示 ; 而 下 浏览 器 则 是 男 外 的 数据 ， 闫 
色 区 的 宽 高 比 是 2:1， 颜 色 区 和 透明 区 的 宽度 比例 也 是 2:1， 如 图 4-60 所 


人 钞 。 


] .1 





图 4-59 Chrome 浏览 器 下 虚线 边框 一 些 比例 数据 


2 





2:1 


图 4-60” 焉 浏览 器 下 虚线 边框 一 些 比 例 数 据 





本 身 就 是 方 方 正 下 的， 再 加 上 羔 容 性 的 差异 ， 基 本 上 就 只 能 当 作 虚 
框 来 用 了 。 





4. border-style:dotted 





虚 点 边框 在 表现 上 同样 有 兼容 性 差异 ， 虽 然 规 范 上 明确 表示 是 个 圆 
点 ， 但 是 Chrome 以 及 Firefox 浏 览 器 下 虚 点 实际 上 是 个 小 方 点 ， 如 图 4-61 
所 示 ; 而 下 浏览 器 下 则 是 小 圆 点 ， 如 图 4-62 所 示 。 


: border-style: dotted; : 


图 4-61 ”Chrome 浏览 器 下 点 线 边框 样式 





border-style: dotted; 。 





图 4-62” 正 浏览 器 下 点 线 边 框 样式 





同样 一 样 事物 ， 在 有 些 人 眼中 是 一 扫 而 过 ， 但 在 有 些 人 眼中 却 是 如 
获 至 宇 。 不 知 大 家 对 上 和 面 的 虚 点 边框 表现 都 怎么 看 呢 ? 有 没有 什么 地 方 
让 你 悍 然 心动 的 呢 ? 


反正 ， 我 是 眼前 一 亮 了 ， 亮 在 什么 地 方 呢 ?” 束 是 下 浏览 器 下 的 虚 点 
是 个 圆 ! 对 ， 圆 ， 难 道 还 意识 不 到 吗 ? 众所周知 ，CSS 圆 角 属 
ee radius 从 IE9 浏 览 器 才 开 始 支持 ，IE8 这 些 浏览 器 要 想 实 现 
融 角 ， 要 么 用 图 片 要 么 使 用 复杂 生 梁 的 VML， 但 是 ，dotted 类 型 边框 
bee 那 我 们 要 想 在 IE8 浏 览 器 下 实现 圆 角 效果 ， 是 不 是 束 
轻松 多 了 呢 ? 





例如 ， 下 面 的 CSS: 


.dotted { 
width: 156px; height: 156pX; 
border: 149px dotted #Ccd6060 ; 


} 





则 此 时 的 表现 如 图 4-63 所 示 。 此 时 的 样式 表现 就 是 4 个 规整 的 圆 点 ， 此 
时 ， 我 们 只 需要 配合 overflow:hidden ， 让 其 中 3 个 点 隐藏 ， 则 圆 角 效 
果 就 实现 了 ， 如 图 4-64 所 示 。 











149px dotted 











图 4-63” 正 浏览 器 4 个 虚 点 











图 4-64 ”隐藏 3 个 圆 点 即 可 实现 圆 角 效果 





使 用 CSS 代 码 表示 就 是 : 


.box { 
width: 156px; height: 156pX; 
/* 超出 区 域 隐藏 ， 只 显示 一 个 圆 */ 
overflow: hidden; 











.dotted { 
width: 166%; height: 166%; 
border: 149px dotted #Ccd6060 
} 





但 是 ， 上 面 的 方法 只 能 实现 正 圆 圆 角 ， 如 果 想 实现 任意 大 小 的 圆 角 
该 怎么 办 ? 


其 实 也 不 难 ， 我 们 不 是 有 4 个 圆 点 吗 ， 正 好 可 以 作为 圆 角 的 4 个 角 ， 
再 履 盖 2 层 官 形 实 色 《〈 如 图 4-65 黑 线 线 框 部 分 区 域 所 示 ) ， 就 实现 了 小 
圆 角 效果 了 。 





图 4-65 ”任意 大 小 圆 角 实现 示意 


5. border-style:double 

双 线 边框 ， 顾 名 思 义 ， 即 两 根 线 且 为 实 线 。 虽 然 平常 我 们 使 用 少 ， 
但 是 其 兼容 性 非常 好 。 视 觉 表现 为 线 框 一 一 透明 线 框 ， 根 据 border- 
width 大 小 不 同 ， 其 表现 规则 如 表 4-2 所 示 。 





表 4-2 border-style:double 表现 规则 


TT 
lpx 0+110 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 
3px 1+1+1 
SPX 2+1+2 
7PX 2+3+2 


从 表 4-2 可 以 看 到 ， 当 边框 宽度 是 1px 和 2px 的 时 候 ， 其 表现 和 


border-style:solid 是 一 模 一 样 的 : 当 边 框 为 3px 的 时 候 ， 才 开始 有 
双 线 边框 的 表现 ， 包 括 retina 屏 幕 也 是 如 此 ， 因 为 边框 宽度 是 没有 半 像 
素 的 概念 的 。 还 记 不 记得 上 一 节 留 下 的 问题 , “为 什么 border-width 
的 默认 值 是 media (3px ) ? ”答案 就 在 这 里 ， 虽 然 说 实际 开发 的 时 
候 1px 大 小 的 solid 类 型 边框 是 最 弟 用 的 ， 但 是 却 无 法 让 double 类 型 
边框 有 合乎 语义 的 表现 ， 因 此 使 用 了 能 表现 double 类 型 的 最 小 边框 宽 
度 3px 作为 边框 宽度 默认 值 。 





根据 表 4-2， 我 们 还 可 以 用 一 句 话 总 结 出 border-style:double 的 
表现 规则 : 双 线 宽度 永远 相等 ， 中 间 间 隔 +1。 





于 是 ， 我 们 就 可 以 借助 border-style:double 实现 一 些 等 宽 的 图 
形 效 果 。 例 如 ， 等 比例 “三 道 杠 ” 图 标 效 果 如 图 4-66 所 示 。 





图 4-66 “三 道 杠 ”小 图 标示 意 














CSS 代 码 如 下 : 


.ijcon-menu { 
width: 126px; 
height: 26pX; 


border-top: 66px double; 
border-bottom: 26px solid; 





6. 其 他 border-style 类 型 


inset (内 四 ) 、outset (外 凸 ) 、groove “ 沟 槽 ) 、ridge 

( 山 疹 ) 风格 老 土 过 时 ， 且 兼容 性 惨不忍睹 《〈 见 图 4-67) 。 因 此 ， 它 们 
没有 任何 实用 价值 。 但 是 ， 它 们 也 不 是 一 无 是 处 ， 这 几 个 边框 类 型 的 出 
现 无 形 中 规范 了 实 线 边框 的 转角 连接 规则 。 规 范 中 并 没有 任何 关于 边框 
连接 规则 的 描述 ， 按 照 一 般 的 套路 ， 浏 览 器 会 表现 不 一 ， 类 似 虚线 之 类 
边框 确实 如 此 ， 但 是 ， 对 于 solid 类 型 边框 ， 各 个 浏览 器 却 像 是 约定 好 
了 ， 连 接 表现 一 致 ， 背 后 起 作用 的 恰恰 是 这 几 个 看 上 去 没有 任何 作用 的 
border-style 类 型 。 这 为 border 图 形 生成 技术 的 广泛 应 用 打下 了 坚 
实 的 基础 。 











IE Chrome Firefox 





图 4-67 inset、outset、groove、ridge 各 浏览 器 表现 截图 
4.4.3 border-color 和 color 


border-color 有 一 个 很 重要 也 很 实用 的 特性 ， 就 是 “border- 
color 默认 颜色 就 是 color 色 值 >”。 有 具体 来 讲 ， 就 是 当 没 有 指定 border 
color 闫 色 值 的 时 候 ， 会 使 用 当前 元 素 的 color 计算 值 作为 边框 色 。 例 





如 ， 下 面 这 个 例子 : 


.box { 
border: 16px solid; 


color: red; 





此 时 ，.box 元 素 的 16px 边框 颜色 就 是 红色 。 


具有 类 似 特 性 的 CSS 属 性 还 有 outline 、box-shadow 和 text- 


shadow 等 。 


那 这 种 特性 对 于 实际 开发 有 没有 什么 作用 呢 ? 我 们 直接 看 一 个 例 





子 ， 我 们 在 上 传 图 片 的 时 候 ， 往 往 后 面 会 跟着 一 个 市 有 加 号 的 框框 按 
钮 ， 表 示 可 以 继续 传 图 ， 如 图 4-68 所 示 ， 然 后 hover 的 时 候 会 变 个 色 。 





图 4-68 ” 带 加 号 的 上 传 按 钮 





这 种 方 方 正 正 、 简 简单 单 的 图 形 最 适合 使 用 三 三 两 两 的 CSS 代 码 绘 
制 了 。 通 常 ， 正 常 思 维 下 ， 我 们 都 是 使 用 width/height 外 加 一 
个 background-color 绘制 加 号 的 ， 核 心 CSS 代 码 如 下 : 





.add { 
border: 2px dashed #ccc; 


} 
.add:before, .add:after { 
background: #ccc; 


} 
/* hover 变 色 */ 
.add:hover { 


border-color: #066C; 


.add:hover:before, .add:hover:after { 
background: #66C; 
} 





功能 没有 任何 问题 ， 唯 独 当 我 们 hover 变色 的 时 候 ， 需 要 同时 重 置 
3 处 (元素 本 身 以 及 两 个 伪 元 素 ) 颜色 。 实 际 上 ， 如 果 这 里 不 是 使 
用 background-color ， 而 是 使 用 border 来 绘制 加 号 ， 则 代码 要 简单 
得 多 ， 如 下 : 





.add { 
color: #ccc; 
border: 2px dashed; 


} 
.add:before { 
border-top: 16px solid; 


} 
.add:after { 
border-left: 16px solid; 


} 

/* hover 变 色 */ 

.add:hover { 
color: #066C; 





可 以 看 到 ， 使 用 border 实现 ， 我 们 hover 变色 的 时 候 ， 只 需要 重 
置 1 处 ， 也 就 是 重 置 元 素 本 身 的 color 就 可 以 了 。 因 为 整个 图 形 都 是 使 
用 border 绘制 的 ， 同 时 颜色 缺 省 ， 所 以 所 有 图 形 颜色 自动 跟着 一 起 变 
下 





中 





图 4-69 ”加 号 按钮 鼠标 经 过 效果 


效果 演示 地 址 是 http:/demo.cssworld.cn/4/4-1.php 。hover 效果 如 图 
4-69 所 示 O 


4.4.4 border 与 透明 边框 技巧 


虽然 color:transparent 在 IE9 以 上 版 本 的 浏览 器 才 支 持 ， 但 
是 border-color: transparent 在 IE7 浏 览 器 就 开始 支持 了 ， 于 是 ， 
我 们 解决 一 些 环 手 问题 的 思路 就 更 加 开阔 了 。 


1. 右 下 方 background 定位 的 技巧 


在 CSS3 新 世界 还 没 到 来 的 时 候 ，background 定位 有 一 个 比较 大 的 
局 限 性 ， 束 是 只 能 相对 左上 和 角 数 值 定位 ， 不 能 相对 右 下 角 。 这 种 特性 有 
时 候 会 给 我 们 的 工作 带 来 一 点 儿 欣 烦 。 举 个 例子 ， 假 设 现在 有 一 个 宽度 
不 固定 的 元 素 ， 我 们 需要 在 距离 右边 缘 50 像 素 的 位 置 设置 一 个 背景 图 
片 ， 此 时 background 属性 就 遭遇 贱 姑 了 : 由 于 宽度 不 固定 ， 所 以 无 法 
通过 设 定 具体 数值 来 实现 我 们 想 要 的 效果 ， 因 为 background 是 相对 左 
上 角 定 位 的 ， 我 们 的 需求 是 右 侧 定 位 。 














要 实现 上 面 的 需求 ， 方 法 挺 多 。 其 中 一 种 方法 就 是 使 用 透明 边框 ， 
如 下 CSS 代 码 : 


.box { 
border-right: 56px solid transparent; 


background-position: 166% 56%; 
} 





此 时 ， 对 58px 的 间距 我 们 使 用 transparent 边框 表示 ， 这 样 就 可 以 使 


用 百分比 background-position 定位 到 我 们 想 要 的 位 置 了 。 因 为 ， 默 
认 background 背景 图 片 是 相对 于 padding box 定 位 的 ， 也 就 是 

说 ，background-position:166% 的 位 置 计 算 默认 是 不 会 把 border- 
width 计算 在 内 的 。 


2. 优雅 地 增加 点 击 区 域 大 小 





这 和 古 提 高 用 户 体验 的 一 个 小 技巧 ， 尤 其 在 移动 端 ， 我 们 的 操作 工具 
一 般 就 是 我 们 的 手指 ， 但 是 ， 我 们 的 手指 粗细 可 以 媲美 胡萝卜 ， 而 屏 送 
尺寸 就 那么 扣 儿 ， 如 果 我 们 正在 走路 ， 则 一 些 精致 的 图 标 和 按钮 很 容易 
束 点 不 中 甚至 误 操 。 举 个 例子 ， 在 移动 闫 搜索 输入 框 输入 内 容 后 ， 石 侧 
会 有 一 个 清除 按钮 ， 类 似 于 图 4-70 所 示 。 





我 是 初始 值 


图 4-70 ”搜索 框 清 除 按钮 








无 论 我 们 是 使 用 CSS 图 标 合并 工具 还 是 手写 模拟 ， 基 本 上 都 是 按照 
图 标的 原始 尺寸 写 的 ， 类 似 下 面 : 





.Icon-clear { 
width: 16px; 
height: 16px; 


} 











效果 虽然 没 问题 ， 但 是 体验 不 一 定好 ， 因 为 尺寸 仪 仪 16 像 素 ， 我 们 
明 区 下 般 的 手指 很 容易 点 不 中 ， 甚 至 点 到 后 面 的 输入 框 上 ， 那 就 砷 这 
二 





稳妥 的 方法 是 外 部 再 能 套 一 层 标 签 ， 专 门 控制 点 击 区 域 大 小 。 如 果 
对 代码 要 求 较 高 ， 则 可 以 使 用 padding 或 者 透明 border 增加 元 素 的 点 
击 区 域 大 小 。 





其 中 ， 首 推 透明 border 方法 ， 原 因 很 简单 ， 假 设 我 们 的 图 标 是 使 
用 工具 生成 的 ， 那 么 background-position 就 是 限定 死 的 值 ， 若 再 使 
用 padding 撑 开 间距 ， 就 会 遇 到 定位 不 准 的 问题 。 但 是 ， 知 是 使 用 透 
明 border 增加 点 击 区 域 ， 则 无 此 问题 ， 只 要 合并 时 留 下 足够 的 间距 就 
> 


.Icon-clear { 
width: 16px; 
height: 16px; 


border: 11px solid transparent; 





此 时 ， 点 击 区 域 大 小 从 16x16 一 下 子 提升 到 38x38， 显 然 更 容易 被 点 中 
Ts 


在 现代 浏览 器 下 手动 输入 http://demo.cssworld.cn/4/4-2.php 或 者 扫 下 
面 的 三 维 码 。 现 在 的 点 击 区 域 如 图 4-71 所 示 。 








我 是 初始 值 LS 




















图 4-71 ”清除 按钮 点 击 区 域 优 雅 增加 




















3， 三 角 等 图 形 绘制 


即使 在 移动 端 ， 使 用 CSS 的 border 属性 绘制 三 角形 等 图 形 仍 是 性 
价 比 最 高 的 方式 。 例 如 ， 一 个 绷 下 的 等 腰 和 直角 三 角形 ， 直 接 用 : 


div { 
width: 6 
border: 16px solid; 
border-color: #f30 transparent transparent; 


} 





则 有 图 4-72 所 示 的 效果 。 
hd 


图 4-72 ” 朝 下 的 三 角 效 果 


4.4.5 border 与 图 形 构建 


border 属性 可 以 轻松 实现 兼容 性 非常 好 的 三 角 图 形 效果 ， 为 什么 
可 以 呢 ? 其 底层 原因 受 inset/outset 等 看 上 去 没有 实用 价值 的 
border-style 属性 影响 ， 边 框 3D 效 果 在 互联 网 早期 其 实 还 是 挺 潮 的 ， 
那个 时 候 人 们 喜欢 有 质感 的 东西 ， 为 了 呈现 逼真 的 3D 效 果 ， 目 然 在 边 
框 转角 的 地 方 一 定 要 等 分 平滑 处 理 ， 然 后 不 同 的 方向 赋予 不 同 的 颜色 。 
然后 ， 这 一 转角 规则 也 被 solid 类 型 的 边框 给 沿用 了 。 因 此 ， 我 们 就 不 
难 理解 下 面 的 4 色 边 框 的 表现 了 : 








div { 
width: 16px;j height: 16px; 
border: 16px solid; 


border-color: #f368 #66f #396 #06f0; 





效果 如 图 4-73 所 示 。 





此 时 ， 如 果 设 置 左 右 下 3 个 方向 边框 色 为 透明 ， 是 不 是 就 是 一 个 梯 
了 2 


div { 
width: 16px;j height: 16px; 
border: 16px solid; 
border-color: #f36 transparent transparent; 


} 





效果 如 图 4-74 所 示 。 


图 4-73” 实 色 边 框 的 转角 连接 表现 














图 4-74 三 个 方向 边框 透明 下 的 梯形 效果 


此 时 ， 再 进一步 ， 宽 度 从 16px 变 成 6 ， 是 不 是 上 面 梯形 下 方 的 开 
口 也 就 从 16px 变 成 6 了 ? 是 不 是 三 角形 效果 就 出 现 了 ? 


div { 
width: 6; 
border: 16px solid; 


border-color: #f36 transparent transparent; 





效果 如 图 4-75 所 示 。 
hd 


图 4-75 朝 下 的 三 角 效 果 





当然 ， 我 们 还 可 以 让 垂直 方向 的 边框 宽度 更 宽 一 点 ， 这 样 三 角形 就 
会 更 加 狭长 : 


div { 
width: 6; 
border-width: 16px 26px; 
border-style: solid; 
border-color: #f30 transparent transparent; 





效果 如 图 4-76 所 示 。 


又 或 者 是 仅仅 让 两 个 方向 的 边框 透明 : 





div { 
width: 6; 
border-width: 16px 26pX; 
border-style: solid; 
border-color: #f30 #f36 transparent transparent; 


效果 如 图 4-77 所 示 。 这 种 三 角形 可 以 作为 类 似 于 如 图 4-78 所 示 对 话 框 的 
/人 > 角 。 


Vy 
图 4-76 更 窜 的 三 角 图 形 


\ 


图 4-77 一 侧 开口 的 三 角 图 形 效果 


如 果 把 两 个 不 同 倾斜 角度 的 三 角 效 果 闭 加 ， 则 可 以 实现 更 加 刁钻 的 
尖 角 效果 ， 如 图 4-79 所 示 。 


相 邻 边框 尖 角 实现 的 气泡 对 话 框 效果 





图 4-78 ”一 侧 开口 的 三 角 图形 实 际 应 用 





图 4-79 三 角 受 加 图 形 效果 


甚至 我 们 可 以 借助 border 生成 的 梯形 实现 包括 正 8 浏 览 器 在 内 的 小 
圆 角 效 果 ， 手 动 输入 http:/demo.cssworld.cn/4/4-3.php 或 者 扫 右 侧 的 二 维 
码 。IE8 浏 览 器 下 的 效果 如 果 4-80 所 示 。 上 面 的 2 像素 圆 角 实现 原理 如 图 
4-81 所 示 。 





我 是 按钮 





图 4-80 ”border 实现 
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图 4-81 border 实现 














圆 角 原 





理 











个 忆 


只 要 是 与 三 角形 或 者 梯形 相关 的 图 形 ， 都 可 以 使 用 border 属性 来 


模拟 。 








4.4.6 ”border 等 高 布局 技术 





margin+padding 可 以 实现 等 高 布局 ， 同 样 ，border 属性 也 可 以 


实现 等 高 布局 。 


想 看 效果 ， 手 动 输入 http://demo.cssworld.cn/4/4-4.php 或 者 扫 右 侧 的 


二 维 码 。 点 击 两 个 按钮 ， 随 意 增加 数目 ， 会 发 现 两 栏 的 背景 色 区 域 高 度 
永远 都 是 一 样 的 ， 如 图 4-82 所 示 。 





模块 1 








图 4-82 border 等 高 布局 效果 
核心 CSS 代 码 如 下 : 


.box { 
border-left: 156px solid #333; 
background-color: #f6f3f9; 

} 

.box > nav { 
width: 156px; 


margin-left: -156pX; 
float: left; 


} 
.box > section { 
overflow: hidden; 


} 





也 就 是 说 ， 左 侧 深 色 背 景区 域 是 由 border-left 属性 生成 的 。 元 











素 边 框 高 度 总 是 和 元 素 目 身高 度 保持 一 致 ， 因 此 可 以 巧妙 地 实现 等 高 布 
局 效果 。 





此 方法 要 想 生 效 ， 有 一 点 需要 注意 ， 父 级 容器 不 能 使 
用 overflow:hidden 清除 浮动 影响 ， 因 为 洲 出 隐藏 是 基于 padding box 
的 ， 如 果 设 置 了 overflow:hidden ， 则 左 浮动 的 导航 列表 元 素 束 会 被 
隐藏 掉 ， 这 显然 不 是 我 们 想 要 的 效果 。 








此 方法 与 用 margin+padding 实现 的 等 高 布局 相 比 更 加 稳健 ， 不 会 
出 现 销 点 定位 带 来 的 问题 ， 但 同样 它 也 是 有 局 限 性 的 。 





首先 ， 由 于 border 不 支持 百分比 宽度 ， 因 此 ， 适 合 至 少 一 栏 是 定 
宽 的 布局 。 当 然 ， 如 果 不 考 虑 IE8 浏 览 器 ， 可 以 试 试 使 用 vw 单位 ， 其 可 
实现 近似 的 百分比 宽度 效果 。 











其 次 ， 等 高 布局 的 栏目 有 限制 。 因 为 一 个 元 素 的 边框 数目 是 有 限 
的 ， 基 本 上 ，border 等 高 布局 只 能 满足 2 一 3 栏 的 情况 ， 除 非 正 好 是 等 
比例 的 ， 那 还 可 以 使 用 border-style:double 实现 最 多 7 栏 布 局 ， 但 这 
只 是 理论 上 而 已 。 所 以 ， 一旦 等 高 布局 栏目 过 多 ， 则 建议 使 用 table- 
cell 等 高 布局 或 者 margin 负 值 等 高 布局 。 











最 终 如 何 选 型 ， 还 是 要 看 设计 需求 和 产品 的 兼容 性 要 求 。 








[1] MDN 上 说 ， 要 想 东 8 兼容 ， 这 里 有 逗 号 后 面 的 空格 要 去 掉 ， 但 是 本 人 
通过 IE11 浏 览 器 的 正 8 模式 看 ， 无 此 问题 。 本 着 求知 的 精神 ， 我 又 打开 
自己 已 经 落 灰 的 10 年 前 的 笔记 本 ， 使 用 原生 IE8 浏 览 器 测试 了 一 下 ， 结 


果 也 是 没有 问题 ， 因 此 ，MDN 上 的 说 法 可 以 忽略 。 


第 5 革 ”内 联 元 系 与 尝 








块 级 元 系 负 贡 结 构 ， 内 联 元 素 接 浓 内 容 ， 而 CSS 世 界 是 面 咎 图 文 混 
排 ， 也 就 是 内 联 元 系 设 计 的 ， 由 此 可 见 ， 本 章 内 容 在 整个 CSS 世 界 体系 
中 占有 非常 重要 的 位 置 。 








5.1 字母 x 一 一 CSS 世 界 中 隐匿 的 举足轻重 的 角 
芭 

我 们 这 里 的 字母 x 就 是 26 个 英文 字母 中 的 x。 由 于 自身 形态 的 一 些 特 
殊 性 ， 这 个 小 小 的 不 起 眼 的 字母 担当 大 任 ， 在 CSS 世 界 中 扮演 了 一 个 重 
要 的 角色 。 


可 能 有 人 的 第 一 反应 是 : “我 知道 ， 可 以 模拟 关闭 按钮 的 那个 叉 叉 
效果 ! ” 

这 位 朋友 思维 很 活跃 ， 但是， 我 们 这 里 说 的 并 不 是 字母 x 在 CSS 世 
界 中 的 奇 技 淫 巧 ， 而 是 正统 的 术语 上 的 紧密 联系 。 
5.1.1 字母 x 与 CSS 世 界 的 基线 


在 各 种 内 联 相 关 模 型 中 ， 凡 是 涉及 垂直 方向 的 排版 或 者 对 齐 的 ， 都 
离 不 开 最 基本 的 基线 (baseline) 。 例 如 ，1line-height 行 高 的 定义 束 
是 两 基线 的 间距 ，vertical-align 的 默认 值 就 是 基线 ， 其 他 中 线 顶 线 
一 类 的 定义 也 离 不 开 基线 ， 基 线 甚至 衍生 出 了 很 多 其 他 基线 概念 (如 图 








5-1 所 示 ) 。 





2a. “字母 ”基线 (英文) b. “悬挂 ” 基线 〈 印 度 文 )  c。、“ 才 





图 5-1 一 些 基线 示意 


那 大 家 知道 基线 又 是 如 何 定义 的 吗 ? 基线 的 定义 束 离 不 开本 文 的 主 
角 X。 


字母 x 的 下 边缘 〈 线 ) 就 是 我 们 的 基线 。 





对 ， 是 字母 x， 不 是 s 之 类 下 面 有 尾巴 的 字母 ， 参 见 如 图 5-2 所 示 的 
标示 。 


从 baseline 











图 5-2 ”CSS 中 的 基线 示意 


5.1.2” 字母 x 与 CSS 中 的 x-height 


字母 x 与 CSS 的 故事 远 不 止 基 线 这 么 简单 。CSS 中 有 一 个 概念 叫 作 x- 





height ， 指 的 是 字母 x 的 高 度 。 


有 人 可 能 会 有 疑问 了 : “一 个 字母 的 高 度 跟 CSS 布 局 排版 有 什么 天 
系 啊 ? ”实际 上 关系 可 大 了 。 


首先 需要 了 解 一 下 x-height 的 含义 。 通 俗 地 讲 ，x-height 指 的 
了 驶 是 小 写字 母 x 的 高 度 ， 术 语 描述 就 是 基线 和 等 分 线 (mean line) (也 
称 作 中 线 ，midline) 之 间 的 距离 。 





维基 上 有 一 意图 ， 如 图 5-3 所 示 。x-height 的 示意 范围 一 目 了 


JAY O 


ascent ascender height 








cap height 


mean line median x-height 





baseline 


descent descender height 


图 5-3 x-height 示意 
图 5-3 中 还 出 现 了 其 他 的 名 词 ， 这 里 简单 说 一 下 我 的 理解 。 


。 ascender height: 上 下 线 高 度 。 
。 cap height: 大 写字 母 高 度 。 

。 median: 中 线 。 

。 descender height: 下 行 线 高 度 。 


CSS 中 有 些 属性 值 的 定义 就 和 这 个 x-height 有 关 ， 最 典型 的 代表 
RN 。 这 里 的 middle 是 中 间 的 意思 。 注 
， 跟 上 面 的 median 中 线 ) 不 是 一 个 意思 。 在 CSS 世 界 中 ，middle 





指 的 是 基线 往 上 1/2 x-height 高 度 。 我 们 可 以 近似 理解 为 字母 x 交叉 点 
那个 位 置 。 





由 此 可 见 ，vertical-align:middle 并 不 是 绝对 的 垂直 居中 对 
齐 ， 我 们 平常 看 到 的 middle 效果 只 是 一 种 近似 效果 。 原 因 很 简单 ， 因 
为 不 同 的 字体 在 行内 盒子 中 的 位 置 是 不 一 样 的 ， 比 如 , “微软 雅 黑 ”就 是 
一 个 字符 下 沉 比 较 明显 的 字体 ， 所 有 字符 的 位 置 都 比 其 他 字体 要 偏 下 一 
点 儿 。 也 就 是 说 ，“ 微 软 雅 黑 * 字 体 的 字母 x 的 交叉 点 是 在 容器 中 分 线 的 
下 面 一 点 。 此 时 ， 我 们 就 不 难 理解 为 什么 vertical-align:middle 不 
是 相对 容器 中 分 线 对 齐 的 了 ， 因 为 在 毕竟 CSS 世 界 中 文字 内 容 是 主体 ， 
所 以 ， 对 于 内 联 元 素 懂 直 居 中 应 该 是 对 文字 ， 而 非 居 外 部 的 块 级 容器 所 

















ll 


5.1.3 ”字母 x 与 CSS 中 的 ex 


字母 x 衍 生出 了 x-height 概念 ， 并 在 这 个 基础 上 深耕 细作 ， 进 一 步 
衍生 出 了 ex 。 注 意 ， 这 里 的 ex 是 CSS 中 地 地 道道 的 一 个 尺寸 单位 。 


大 家 可 能 都 听 过 和 用 过 em 、px 和 rem ， 但 对 连 正 6 都 老 早 支 持 的 ex 
单位 却 很 陌生 。 





ex 是 CSS 中 的 一 个 相对 单位 ， 指 的 是 小 写字 母 x 的 高 度 ， 没 错 ， 驶 


是 指 x-height 。 
那 这 个 单位 有 什么 实际 用 途 呢 ?存在 必 有 价值 ! 用 得 少 ， 并 不 表示 


其 没有 作用 ， 只 是 因为 我 们 并 没有 好 好 地 理解 它 、 挖 掘 它 。 我 们 细 细 思 
考 字 母 x 在 CSS 世 界 中 扮演 的 角色 ， 就 会 发 现 ex 的 价值 所 在 。 











注意 ， 虽 然 次 em 、px 这 类 单位 的 主要 作用 是 限定 元 素 的 尺寸 但 
是 ， 由 于 字母 x 受 字 体 等 CSS 属 性 影响 大 ， 不 稳定 ， 因 此 ex 不 太 适 合用 
来 限定 元 素 的 尺寸 。 那 问题 来 了 : ex 连 自己 的 本 职工 作 都 做 不 好 ， 难 
道 还 指望 其 副业 开 挂 ? 




















没 错 ，ex 的 价值 束 在 其 副业 上 
素 的 垂直 居中 对 齐 效果 。 


不 受 字 体 和 字号 影响 的 内 联 元 





我 们 都 知道 ， 内 联 元 素 默 认 是 基线 对 齐 的 ， 而 基线 就 是 x 的 底部 ， 
而 1ex 就 是 一 个 x 的 局 度 。 设 想 一 下 ， 假 如 图 标高 度 就 是 lex ， 同 时 背 
景 图 片 大 中 ， 电 不 是 图 标 和 文字 天 然 垂直 居中 ， 而 且 完 全 不 受 字体 和 字 
号 的 影响 ? 因为 ex 就 是 一 个 相对 于 字体 和 字号 的 单位 。 





文字 表述 比较 苍白 ， 我 们 来 看 一 个 例子 。 图 5-4 所 示 的 文字 后 面 跟 
着 一 个 小 三 角形 图 标的 效果 是 非常 常见 的 。 现 在 ， 要 让 该 图 标 和 文字 中 
间 位 置 对 齐 ， 你 会 如 何 实现 ? 设 定好 尺寸 ， 然 后 使 用 vertical- 
align:middle ? 这 样 昌 然 也 有 效果 ， 但 是 ， 实 际 上 吵 叶 了 ， 借 助 ex 单 
位 ， 我 们 直接 利用 默认 的 baseline 基线 对 齐 就 可 以 实现 这 个 效果 。 





每 页 显示 15 








图 5-4 ”文字 与 小 三 角 图 标 


CSS 代 人 码 如 下 : 





.ijcon-arrow { 
display: inline-block; 
width: 26px; 
height: 1ex; 
background: url(arrow.png) no-repeat center; 





然后 就 对 齐 了 ， 完 全 没有 vertical-align 出 场 的 机 会 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/1-1.php 或 者 扫 右 侧 的 
二 维 码 。 你 会 发 现 ， 就 算 我 们 把 字体 修改 ， 把 字号 设置 得 很 大 ， 对 齐 依 
然 良 好 ， 如 图 5-5 所 示 。 





zhangxinxu 





图 5-5 ”使 用 ex 单位 对 齐 不 受 字体 和 字号 影响 
5.2 ”内 联 元 素 的 基石 ]ine-height 
本 节 中 line-height 的 内 容 会 涉及 很 多 内 联合 模型 的 知识 ， 


此 ， 务 必 先 要 掌握 3.4.2 节 关于 内 联 盒 模型 的 知识 。 另 外 ， 下 文中 所 有 
的 “ 行 高 ” 指 的 就 是 line-height 。 





5.2.1 内 联 元 素 的 高 度 之 本 一 一 line-height 





先 思 考 下 面 这 个 问题 ， 默认 空 <div> 高 度 是 6 ， 但 是 一 旦 里 面 写 上 
几 个 文字 ，<div> 高 度 就 有 了 ， 请 问 这 个 高 度 由 何 而 来 ， 或 者 说 是 由 哪 
个 CSS 属 性 决定 的 ? 





如 果 仅 仅 通过 表象 来 确认 ， 估 计 不 少 人 会 认为 <div> 高 度 是 由 里 面 
的 文字 撑 开 的 ， 也 就 是 font-size 决定 的 ， 但 本 质 上 是 由 line- 
height 属性 全 权 决 定 的 ， 尽 管 某 些 场景 确实 与 font-size 大 小 有 关 。 


我 们 不 妨 设 计 一 个 简单 的 例子 来 看 看 真相 完 竟 是 什么 。 例 如 : 


<div class="test1"> 我 的 高 度 是 ? </div> 
.test1 { 
font-size: 16px; 
line-height: 6; 
border: 1px solid #ccc; 
background: #eee; 


<div class="test2"> 我 的 高 度 是 ?</div> 
.test1 { 
font-size: ©; 
line-height: 16px; 
border: 1px solid #ccc; 
background: #eee; 


} 





这 两 段 代 码 的 区 别 在 于 一 个 line-height 行 高 为 69， 一 个 font-size 
字号 为 6 。 结 果 ， 第 一 段 代码 ， 最 后 元 素 的 高度 只 剩 下 边框 那么 丁点 
儿 ， 而 后 面 一 段 代 码 ， 虽 然 文字 小 到 都 看 不 见 了 ， 但 是 16px 的 内 部 高 
度 依然 坚 手 ， 如 图 5-6 所 示 。 











我 的 高 度 是 了 





图 5-6 ”文字 高 度 本 质 上 由 行 高 决定 





很 显然 ， 从 上 面 这 个 例子 可 以 看 出 ，<div> 高 度 是 由 行 高 决定 的 ， 
而 非 文字 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-1.php 或 者 扫 右 侧 的 
二 维 码 。 





下 面 要 说 一 些 很 有 意思 的 结论 ， 对 于 非 蔡 换 元 素 的 纯 内 联 元 素 ， 其 
可 视 高 度 完 全 由 line-height 决定 。 注 意 这 里 的 措辞 一 一 “完全 ”， 什 
么 padding 、border 属性 对 可 视 高 度 是 没有 任何 影响 的 ， 这 也 是 我 们 
平常 口中 的 “ 盒 模型 "约定俗成 说 的 是 块 级 元 素 的 原因 。 











因此 ， 对 于 文本 这 样 的 纯 内 联 元 素 ，line-height 就 是 高 度 计 算 
的 基石 ， 用 专业 说 法 就 是 指定 了 用 来 计算 行 框 盒子 高 度 的 基础 高 度 。 比 
方 说 ，line-height 设 为 16px ， 则 一 行文 字 高 度 是 16px ， 两 行驶 








征 32px ， 三 行 就 是 48px ， 所 有 浏览 器 泻 染 解 析 都 是 这 个 值 ，1 像 素 都 
不 差 。 


那 如 条 是 蔡 换 元 系 ， 又 或 者 是 块 级 元 素 ，1Line-height 在 其 中 又 
扮演 什么 角色 呢 ? 


在 回答 这 个 问题 之 前 ， 我 们 最 好 先 把 1ine-height 作用 于 内 联 元 
素 的 细节 给 搞 明 白 。 

通常 ，1line-height 的 高 度 作 用 细节 都 是 使 用 “行距 2 和 “* 半 行距 ?来 
解释 的 。 那 么 什么 是 “行距 >”， 什 么 又 是 “ 半 行 距 ? 呢 ? 





首先 大 家 需要 明确 这 一 点 : 字体 设计 以 及 文字 排版 是 门 很 深入 的 学 
问 ， 英 文 和 中 文 义 有 很 多 不 同 之 处 ， 但 是 ， 我 们 平常 构建 页 面 无 须 如 此 
事 无 巨细 的 知识 。 因 此 ， 这 里 只 简单 介绍 部 分 知识 ， 方 便 大 家 理解 东 些 
行为 和 特性 ， 更 多 内 容 会 在 第 8 章 中 拔 露 。 








我 个 人 是 这 么 认为 的 : 内 联 元 素 的 高 度 由 固定 高 度 和 不 固定 高 度 组 
成 ， 这 个 不 固定 的 部 分 就 是 这 里 的 “行距 ”。 换 句 话说 ，line-height 之 
所 以 起 作用 ， 就 是 通过 改变 “行距 ”来 实现 的 。 








中 国 古 代 四 大 友 明 之 一 的 活字 印刷 术 使 用 的 是 雕刻 好 的 胶泥 字模 ， 
大 家 可 以 回忆 一 下 北京 奥运 会 开幕 式 上 活字 印刷 术 表 演 中 那些 凸 起 的 方 
块 ， 它 使 用 的 字体 是 宋体 ， 注 意 ， 是 宋体 。 然 而 ， 如 果 这 些 方块 部 是 密 
密 胀 斥 无 缝 际 铺 在 一 起 ， 印 出 来 的 文字 束 是 方 方 正 正 的 一 团 ， 那 么 我 们 
会 无 法 一 眼看 出 应 该 横着 读 还 是 竖 着 仿 。 要 知道 古人 的 排版 是 竖 排 的 ， 
但 我 们 去 看 古人 的 印刷 作品 却 不 会 错误 地 横着 看 ， 为 什么 呢 ? 因为 印 出 











来 的 文字 垂直 方向 确实 一 个 接着 一 个 ， 但 是 ， 水 平方 向 ， 列 与 列 之 间 却 
有 者 明 显 的 间 隐 ， 如 图 5-7 所 示 ， 这 个 间 隐 其 实 就 是 “行距 ?。 











图 5-7 活字 印刷 之 列 间距 





所 以 ,“ 行 距 ? 的 作用 是 可 以 瞬间 明确 我 们 的 阅读 方向 ， 让 我 们 阅读 
文字 更 轻松 。 在 CSS 世 界 中 , “行距 ?其 实 也 是 类 似 的 东西 ， 但 还 是 有 些 
差别 的 。 以 水 平 阅读 流 举例 ， 传 统 印 刷 的 “行距 ”是 上 下 两 行文 字 之 间 预 
留 的 间 际 ， 是 个 独立 的 区 域 ， 也 就 意味 着 第 一 行文 字 的 上 方 是 没有 “ 行 
距 ” 的 ; 但 是 在 CSS 中 ,“ 行 距 ” 分 散在 当前 文字 的 上 方 和 下 方 ， 也 就 是 即 
使 是 第 一 行文 字 ， 其 上 方 也 是 有 “行距 ”的 ， 只 不 过 这 个 “行距 ”的 高 度 仪 
仅 是 完整 “行距 ?高 度 的 一 半 ， 因 此 ， 也 被 称 为 “ 半 行 距 ”。 























人 总 是 先入 为 主 ， 尤 其 是 前 上 咒 人 员 ， 排 版 知识 的 获取 基本 上 都 是 从 
CSS 实 际 工作 中 来 ， 就 会 很 自然 地 认为 “间距 就 是 应 该 上 下 等 分 啊 ”， 实 
际 上 太 天 真 了 ， 且 先 不 说 传统 印刷 的 “行距 ?在 中 间 ， 著 名 的 排版 软件 
Adobe InDesign 的 “行距 ?就 是 加 在 文字 上 方 的 ， 所 以 没有 什么 理 所 当 
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现在 知道 了 CSS 的 “ 半 行 距 ”"， 那 么 哪里 到 哪里 才 是 “ 半 行 距 ” 的 高 度 
范围 呢 ? 一 般 业 界 的 共识 是 : 行距 = 行 高 -em-box。 转 换 成 CSS 语 言 就 
是 : 行距 = line-height - font-size 。 其 中 em-box 是 CSS 世 界 中 比 
较 虚 的 一 个 概念 ， 说 “ 虚 ” 并 不 是 胡 编 乱 造 的 意思 ， 而 是 我 们 无 法 有 效 感 
知 这 个 盒子 具体 的 位 置 在 哪里 ， 但 是 有 一 点 可 以 明确 ， 束 是 其 蜗 度 正好 
就 是 lem 。em 是 一 个 相对 font-size 大 小 的 CSS 单 位 ， 因 此 1em 等 用 于 
当前 一 个 font-size 大 小 ， 这 就 是 “行距 = line-height - font- 
size ”这 个 公式 的 由 来 。 有 了 “行距 ”"”， 我 们 一 分 为 二 ， 束 有 了 “ 半 行 
距 ”， 分 别 加 在 em-box 上 面 和 下 面 就 构成 了 文字 的 完整 高 度 了 。 话 虽 这 
么 讲 ， 但 一 旦 不 弄 清楚 em-box 究 竟 在 什么 位 置 ， 我 们 就 无 法 在 脑 中 形成 
关于 行 高 的 具象 认 知 ， 知 识 很 容易 遗忘 。 




















人 很 容易 被 肉眼 所 见 的 东西 迷惑 ， 因 此 ， 很 多 人 会 把 文字 图 形 区 域 
看 成 是 em-box 范 围 ， 实 际 上 这 是 不 正确 的 ， 比 方 说 ， 一 些 带 尾 巴 的 英文 
字符 q 或 者 g， 其 小 尾巴 是 在 em-box 范 围 之 外 的 ， 而 对 于 汉字 ， 很 多 字 
体 图 形 高 上 度 实际 上 要 小 于 em-box 高 度 的 。 





此 时 ， 就 轮 到 内 容 区 域 (content area) 出 马 了 。 在 本 书 中 ， 内 容 区 
域 可 以 近似 理解 为 Firefox/ 正 浏览 器 下 文本 选中 带 背 景色 的 区 域 。 这 人 么 理 
解 的 重要 原因 之 一 就 是 可 见 ， 这 对 于 我 们 深入 理解 内 联 元 素 知 识 非 常 有 
帮助 。 





大 多 数 场景 下 ， 内 容 区 域 和 em-box 是 不 一 样 的 ， 内 容 区 域 高 度 受 
font-family 和 font-size 双重 影响 ， 而 em-box 仅 受 font-size 影 
啊 ， 通 常 内 容 区 域 高 度 要 更 高 一 些 。 除 了 下 面 这 种 情况 ， 也 就 是 “ 当 我 
们 的 字体 是 宋体 的 时 候 ， 内 容 区 域 和 em-box 是 等 同 的 ”， 因 为 宋体 是 一 








种 正统 的 印刷 字体 ， 方 方正 正 ， 所 以 干 万 不 要 小 看 宋体 。 


于 是 ， 利 用 我 们 平 第 不 待 见 的 宋体 ， 残 能 准确 揪 出 “ 半 行 距 ” 的 藏 号 
之 所 了 ， 测 试 代码 如 下 : 


.test { 
font-family: simsun; 
font-size: 24px; 
line-height: 36px; 
background-color: yellow; 


} 
.test > span { 
background-color: white; 


<div class="test"> 
<span>sphinx</span> 
</divy> 





此 时 ， 乎 第 虚无 的 em-box 借 助 内 容 区 域 〈( 图 5-8 中 字符 sp 的 选中 区 域 ) 
有 暴露 出 了 万 山 真面目 ，“ 半 行距 ?也 准确 显现 出 来 了 了， 如 图 5-8 右 侧 标 
人 





1imne-helght:120px 


torn-slze:B0px 


248 x 86 





图 5-8 半 行 间距 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-2.php。 


学 习 基 础 理论 知识 的 好 处 之 一 就 是 可 以 更 准确 地 进行 技术 实践 ， 比 
方 说 这 里 ， 我 们 知道 “ 半 行 距 ? 的 位 置 和 范围 ， 就 可 以 更 准确 地 帮助 我 们 


还 原 设计 。 


可 能 是 由 于 CSS 开 发 人 员 不 够 专注 细致 ， 外 加 规范 设计 本 身 的 原 
因 ， 设 计 师 往往 会 对 各 个 元 素 间 的 距离 间 隐 标注 得 很 清晰 。 但 是 ， 设 计 
师 并 不 是 开发 人 员 ， 他 们 并 没有 把 网 页 中 无 处 不 在 行 间 距 考 虑 在 内 ， 所 
有 与 文字 相关 的 间距 都 是 从 文字 的 上 边缘 和 下 边缘 开始 标注 的 。 除 非 我 
们 全 局 行 高 设置 为 line-height:1 ， 否 则 这 些 标注 的 距离 和 我 们 使 用 
的 margin 间距 都 是 不 一 致 的 。 











但 是 ， 如 果 我 们 理解 了 半 行 距 ， 结 合 我 们 网 页 中 的 设置 的 line- 
height 大 小 ， 就 能 根据 标注 获取 准确 的 间距 值 。 举 个 例子 ， 假 设 
line-height 是 1.5 ，font-size 大 小 是 14px ， 那 么 我 们 的 半 行 距 大 
小 就 是 (套用 上 面 的 行距 公式 再 除 以 2 ) : (14px * 1.5 - 14px) / 
2 = 14px * 8.25 = 3.5px 。border 以 及 line-height 等 传统 CSS 
属性 并 没有 小 数 像 素 的 概念 〈 从 CSS3 动 画 的 细腻 程度 可 以 看 出 ) ， 
此 ， 这 里 的 3.5px 霸 要 取 整 处 理 ， 如 果 标 注 的 是 文字 上 边 距 ， 则 向 下 取 
整 ， 如 果 是 文字 下 边 距 ， 则 向 上 取 整 ， 因 为 绝 大 多 数 的 字体 在 内 容 区 域 
中 都 是 偏 下 的 。 所 以 ， 假 设 设计 师 标注 了 文字 字形 上 边缘 到 图 片 下 边缘 
间距 26px ， 则 我 们 实际 的 margin-top 值 应 该 是 17px ， 因 为 3.5px 向 
下 取 整 是 3px 。 














下 面 回 到 最 初 的 问题 ，1ine-height 如 何 通过 改变 行距 实现 文字 
排版 ? 当 line-height 设 为 2 的 时 候 ， 半 行距 是 一 半 的 文字 大 小 ， 两 行 
文字 中 间 的 间 隐 差不多 一 个 文字 尺寸 大 小 ; 如 果 1Line-height 大 小 是 1 


音 文 字 大 小 ， 则 根据 计算 ， 半 行距 是 8 ， 也 就 是 两 行文 字 会 紧密 依 假 在 
一 起 ; 如 果 1line-height 值 是 8.5 ， 则 此 时 的 行距 就 是 负 值 ， 虽 

然 line-height 不 文 持 负 值 ， 但 是 行距 可 以 为 负 值 ， 此 时 ， 两 行文 字 
就 是 重 闭 纠缠 在 一 起 。 具 体 表 现 如 图 5-9 所 示 。 图 5-9 有 对 应 的 实例 页 
面 ， 有 兴趣 的 话 可 以 手动 输入 http://demo.cssworld.cn/5/2-3.php 或 者 扫 下 
面 的 二 维 码 。 














图 5-9 ”1ine-height 通过 控制 行距 实现 文字 排版 


说 完了 内 联 元 素 ， 下 面 轮 到 答 换 元 系 和 块 级 元 素 了 。 








关于 替换 元 素 的 高 度 与 line-height 的 关系 首先 需要 弄 明 白 这 个 
问题 : line-height 可 以 影响 蔡 换 元 素 〈 如 图 片 的 高 度 ) 吗 ? 答案 
是 ， 不 可 以 ! 





可 能 有 人 会 反驳 了 ， 不 会 呀 ， 你 看 下 面 这 个 例子 : 


.box { 
line-height: 256px 


} 
<div class="box"> 

<img src="1.jpg" height="128"> 
</div> 





<div> 元 系 中 ， 就 一 张 图 片 ， 其 他 什么 都 没有 ， 但 此 时 .box 元 又 高 度 
却 是 256px ， 难 道 不 是 line-height 把 图 片 占据 的 高 度 变 高 了 吗 ? 








不 是 的 ， 不 是 line-height 把 图 片 占据 高 度 变 高 了 ， 而 是 把 “幽灵 
空白 节点 ”的 高 度 变 高 了 。 图 片 为 内 联 元 素 ， 会 构成 一 个 “ 行 框 盒 子 ”， 
而 在 HIML5 文 档 模 式 下 ， 每 一 个 “ 行 框 盒子 ”的 前 面 都 有 一 个 宽度 为 8 
的 “幽灵 空白 节点 ”其 内 联 特性 表现 和 普通 字符 一 模 一 样 ， 所 以 ， 这 里 
的 容器 高 度 会 等 于 line-height 设置 的 属性 值 256px 。 

















实际 开发 的 时 候 ， 图 文 和 文字 混在 一 起 是 很 常见 的 ， 那 这 种 内 联检 
换 元 素 和 内 联 非 答 换 元 际 在 一 起 时 的 高 度 表 现 又 是 怎样 的 呢 ? 





由 于 同属 内 联 元 素 ， 因 此 ， 会 共同 形成 一 个 “ 行 框 盒子 ”，1ine- 
height 在 这 个 混合 元 素 的 “ 行 框 盒子 ”中 扮演 的 角色 是 决定 这 个 行 盒 的 
最 小 高 度 ， 听 上 去 似乎 有 点 儿 烛 和 界 ， 对 于 纯 文 本 元 素 ，1line-height 
非常 威风 ， 直 接 决 定 了 最 终 的 高 度 。 但 是 ， 如 果 同 时 有 蔡 换 元 素 ， 

则 1ine-height 的 表现 一 下 子 弱 了 很 多 ， 只 能 决定 最 小 高 度 ， 对 最 终 
的 高 度 表 现 有 望 侍 莫 及 之 感 。 为 什么 会 这 样 呢 ? 一 是 蔡 换 元 素 的 高 度 不 
受 line-height 影响 ， 二 是 vertical-align 属性 在 背后 作 尝 。 











对 于 这 种 混合 蔡 换 元 素 的 场景 ，1ine-height 要 想 一 统 江 山 ， 需 
要 值 足 够 大 才 行 。 但 是 ， 实 际 开 发 的 时 候 ， 我 们 给 line-height 设置 
的 值 总 是 很 中 规 中 矩 ， 于 是 ， 就 会 出 现 类 似 下 面 的 场景 : 明明 文字 设置 
了 line-height 为 28px ， 但 是 ， 如 果 文 字 后 面 有 小 图 标 ， 最 后 “ 行 框 盒 
子 ” 高 度 却 是 21px 或 是 22px 。 这 种 现象 背后 最 大 的 黑手 其 实 
是 vertical-align 属性 ， 我 们 会 在 下 一 章 好 好 深入 剖析 为 什么 会 有 这 
样 的 表现 。 
































对 于 块 级 元 素 ，line-height 对 其 本 身 是 没有 任何 作用 的 ， 我 们 
平时 改变 line-height ， 块 级 元 素 的 高 度 跟 着 变化 实际 上 是 通过 改变 
块 级 元 素 里 面 内 联 级 别 元 素 占 据 的 高 度 实现 的 。 











比方 说 ， 一 个 <p> 元 素 中 有 10 行 图 文 内 容 ， 则 这 个 <p> 元 素 的 高 度 
就 是 由 这 10 行 内 容 产 生 的 10 个 “ 行 框 盒子 ?高度 累加 而 成 ;一 个 
<article> 元 素 中 可 能 会 有 20 个 <p> 元 素 ， 则 这 个 <article> 元 素 又 
是 由 这 20 个 块 级 <p> 元 素 高 度 累 加 而 成 ， 同 时 块 级 元 素 还 可 以 通过 
height 和 min-height 以 及 盒 模型 中 的 margin 、padding 和 border 
等 属性 改变 占据 的 高 度 ， 所 有 这 一 切 就 构成 了 CSS 世 界 完 整 的 高 度 体 
未 5 





因为 line-height 几乎 无 处 不 在 的 继承 特性 ， 并 且 CSS 世 界 是 为 了 
更 好 地 图 文 展 示 ， 所 以 line-height 不 仅 是 内 联 元 素 高 度 的 基石 ， 而 
且 还 是 整个 CSS 世 界 高 度 体系 的 基石 。 


5.2.2 ”为 什么 line-height 可 以 让 内 联 元 素 “ 垂 直 居 中 ” 


坊间 流传 着 这 么 一 种 说 法 :“ 要 想 让 单行 文字 垂直 居中 ， 只 要 设 





置 1ine-height 大 小 和 height 高 度 一 样 就 可 以 了 。? 类 似 下面 这 样 的 
代码 : 


.title { 
height: 24px; 


line-height: 24px; 
} 





从 效果 上 看 ， 似 乎 验证 了 这 种 说 法 的 正确 性 。 但 是 ， 实 际 上 ， 上 面 的 说 
法 对 CSS 初 学 者 会 产生 两 个 严重 的 误导 ， 同 时 ， 语 名 本身 也 存在 不 严谨 
的 地 方 ! 





误区 之 一 : 要 让 单行 文字 垂直 居中 ， 只 需要 line-height 这 一 个 
属性 就 可 以 ， 与 height 一 点 儿 关 系 都 没有 。 也 就 是 说 ， 我 们 直接 : 


.title { 
line-height: 24px; 
} 


就 可 以 了 。 坊 间 传 邮 的 说 法 会 误导 大 小 一 定 要 同时 设置 height 属性 才 
可 以 。 














误区 二 : 行 高 控制 文字 垂直 居中 ， 不 仅 适 用 于 单行 ， 多 行 也 是 可 以 
的 。 准 确 的 说 法 应 该 是 “1ine-height 可 以 让 单行 或 多 行 元素 近 似 垂直 
居中 ”。 稍 等 ， 这 里 有 个 词 似乎 和 上 面 的 表述 有 点 儿 微 妙 的 差异 , “近似 
垂直 居中 ”? 没 错 ， 一 定 要 加 上 “近似 ”二 字 ， 这 样 的 说 法 才 足 够 严谨 。 
换 名 话说， 我 们 通过 line-height 设置 的 垂直 居中 ， 并 不 是 真正 意义 
上 的 垂直 居中 ! 究竟 是 怎么 一 回 事 ? 




















这 里 ， 其 实 要 解答 的 是 两 个 问题 ， 一 个 是 为 何 可 以 "垂直 居中 *， 另 
一 个 是 为 何 是 “近似 *。 


正如 上 一 节 所 说 的 ， 没 有 什么 理所当然 ， 


行 高 可 以 实现 “垂直 居 
中 ”原因 在 于 CSS 中 “行距 的 上 下 等 分 机 制 ”， 如 果 行 距 的 添加 规则 是 在 文 
字 的 上 方 或 者 下 方 ， 则 行 高 是 无 法 让 文字 垂直 居中 的 。 








子 ” 的 垂直 中 线 位 置 低 ， 璧 如 我 们 拿 现 在 用 得 比较 多 的 微软 雅 黑 字体 举 
例 : 





说 “近似 ?是 因为 文字 字形 的 垂直 中 线 位 置 普 壳 要 比 真 正 的 “ 行 框 盒 


pi 


font-size: 806px; 
line-height: 126px; 


background-color: #666; 
font-family: 


'microsoft yahei'; 
color: #fff; 
} 








<p> 微 软 雅 黑 </p> 


结果 ， 我 都 不 需要 标注 ， 肉 眼 就 能 看 出 字形 明显 俩 下 ， 如 图 5-10 所 示 。 


短 鸭 雅 





AAA 


图 5-10 line-height 与 位 置 下 沉 的 微软 雅 黑 字 体 





由 于 我 们 平时 使 用 的 font-size 都 比较 小 ，12px 一 16px 很 多 ， 
此 ， 虽 然 微 软 雅 黑 字 体 有 下 沉 ， 但 也 就 1 像素 的 样子 ， 所 以 我 们 往往 觉 





察 不 到 这 种 “垂直 对 齐 ” 其 实 并 不 是 真正 意义 上 的 垂直 居中 ， 只 是 感官 上 
看 上 去 像 是 垂直 居中 罢了 。 这 也 是 我 总 是 称 1ine-height 实现 的 单行 
文本 垂直 居中 为 “近似 垂直 居中 ”的 原因 。 

















下 面 再 来 说 说 行 高 实现 多 行文 本 或 者 图 片 等 蔡 换 元 象 的 垂直 居中 效 
果实 现 。 


多 行文 本 或 者 蔡 换 元 素 的 垂直 居中 实现 原理 和 单行 文本 就 不 一 样 
了 ， 需 要 line-height 属性 的 好 朋友 vertical-align 属性 帮助 才 可 
以 ， 示 例 代 码 如 下 : 


.box { 
line-height: 128px; 
background-color: #f6f3f9; 


.Content { 
display: inline-block; 
line-height: 26pX; 
margin: 6 28px; 
vertical-align: middle; 


<div class="box"> 
<div class="content"> 基 于 行 高 实现 的 .. .</div> 
</div> 











效果 如 图 5-11 所 示 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/5/2-4.php 或 者 扫 下 面 的 二 维 码 。 





基于 行 高 实现 的 多 行文 字 委 直 居中 效 
Ed 


,需要 vertical-align 属 性 帮助 。 





图 5-11 1line-height 与 多 行文 字 垂直 居中 效果 
实现 的 原理 大 致 如 下 。 


(1) 多 行文 字 使 用 一 个 标签 包 里 ， 然 后 设置 display 为 inline- 
block 。 好 处 在 于 既 能 重 置 外 部 的 line-height 为 正常 的 大 小 ， 又 能 
保持 内 联 元 素 特性 ， 从 而 可 以 设置 vertical-align 属性 ， 以 及 产生 一 
个 非常 关键 的 “ 行 框 盒子”。 我 们 需要 的 其 实 并 不 是 这 个 “ 行 框 例子”， 而 
是 每 个 “ 行 框 盒子 ?都 会 附带 的 一 个 产物 一 一 “幽灵 空白 节点 ”， 即 一 个 宽 
度 为 6、 表现 如 同 普通 字符 的 看 不 见 的 “节点 ”。 有 了 这 个 “幽灵 空 和 白 节 
点 ”， 我 们 的 line- height:126px 就 有 了 作用 的 对 象 ， 从 而 相当 于 
在 .content 元 素 前 面 撑 起 了 一 个 高 度 为 126px 的 宽度 为 6 的 内 联 元 
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(2) 因为 内 联 元 素 默认 都 是 基线 对 齐 的 ， 所 以 我 们 通过 
对 .content 元 素 设 置 vertical- align:middle 来 调整 多 行文 本 的 重 
直 位 置 ， 从 而 实现 我 们 想 要 的 “垂直 居中 ”效果 。 如 果 是 要 借助 1ine- 
height 实现 图 片 垂直 居中 效果 ， 也 是 类 似 的 原理 和 做 法 。 





细心 的 读者 可 能 发 现 ， 上 面 我 解释 原理 的 时 候 , “垂直 居中 ”这 4 个 
字 加 了 引号 ， 英 非 ， 这 里 的 “垂直 居中 ”又 是 “近似 ”? 








你 还 真 说 对 了 ， 这 里 实现 的 “垂直 居中 ”确实 也 不 是 真正 意义 上 的 重 
直 居 中 ， 也 是 “近似 垂直 居中 ”。 还 是 上 面 的 多 行文 本 垂直 居中 的 例子 ， 
如 果 我 们 捕获 到 多 行文 本 元 素 的 尺寸 空间 ， 截 个 图 ， 然 后 通过 尺子 工具 
一 量 就 会 发 现 ， 上 面 的 留 空 是 41px ， 下 面 的 留 空 是 39px ， 对 啦 ， 原 来 
不 是 完全 的 垂直 居中 ， 如 图 5-12 所 示 。 
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图 5-12 ”上 下 留 白 大 小 是 不 一 样 的 








不 垂直 居中 与 1ine-height 无 关 ， 而 是 vertical- align 导致 
的 ， 有 具体 原因 我 们 将 在 5.3 节 讲解 。 


5.2.3 深入 line-height 的 各 类 属性 值 


line-height 的 默认 值 是 normal ， 还 支持 数值 、 百 分 比值 以 及 长 
度 值 。 


首先 了 解 一 下 这 个 看 上 去 一 般 实 际 上 不 一 般 的 normal 。 为 什么 说 
line-height 的 默认 值 normal 不 一 般 呢 ? 因为 ， 本 质 上 ， 这 个 normal 
实际 上 是 一 个 变量 。 我 想 ， 很 多 人 脑 中 的 想法 应 该 是 这 样 的 : normal 
应 该 对 应 一 个 有 具体 的 行 高 值 ， 按 照 经 验 差不多 1 倍 多 一 点 儿 的 样子 ， 具 
体 值 多 少 需 要 测试 一 下 才 知 道 。 实 际 上 非 也 ! normal 实际 上 是 一 个 和 
font-family 有 着 密切 关联 的 变量 值 。 什 么 意思 呢 ? 比方 说 ， 一 
<div> 元 素 ， 有 两 段 对 比 CSS 如 下 : 








div { 
line-height: normal; 
font-family: "microsoft yahei'; 


} 


div { 
line-height: normal; 
font-family: simsun; 


} 





此 时 两 段 CSS 中 line-height 的 属性 值 normal 的 计算 值 是 不 一 样 的 ， 
表 5-1 给 出 的 是 我 在 几 个 桌面 浏览 器 的 测试 数据 。 


表 5-1 不 同 字体 下 的 line-height:normal 解析 值 


| 











可 以 看 到 ， 只 要 字体 确定 ， 各 个 浏览 器 下 的 默认 line-height 解 





析 值 基本 上 都 是 一 样 的 。 然 而 ， 关 键 问 题 是 ， 不 同 的 浏览 器 所 使 用 的 默 
认 中 英文 字体 并 不 是 一 样 的 ， 并 且 不 同 操 作 系 统 的 默认 字体 也 不 一 样 ， 
换 句 话说 ， 就 是 不 同系 统 不 同 浏览 器 的 默认 line-height 都 是 有 差异 
的 。 因 此 ， 在 实际 开发 的 时 候 ， 对 line-height 的 默认 值 进行 重 置 是 
势 在 必 行 的 。 下 面 问题 来 了 ，1line-height 应 该 重 置 为 多 大 的 值 呢 ? 
是 使 用 数值 、 百 分 比值 还 是 长 度 值 呢 ? 

















要 回答 这 个 问题 ， 我 们 需要 先 对 这 儿 种 属性 值 有 一 定 的 了 解 才 行 。 


。 数值 ， 如 line-height:1.5 ， 其 最 终 的 计算 值 是 和 当前 font- 
size 相 乘 后 的 值 。 例 如 ， 假 设 我 们 此 时 的 font-size 大 小 为 14px 
， 则 1ine-height 计算 值 是 1.5*14px=21px 。 

百分比 值 ， 如 Line-height:156% ， 其 最 终 的 计算 值 是 和 当 

前 font-size 相 乘 后 的 值 。 例 如 ， 假 设 我 们 此 时 的 font-size 大 
小 为 14px ， 则 line-height 计算 值 是 156%*14px=21px 。 

长 度 值 ， 也 就 是 带 单位 的 值 ， 如 Line-height:21px 或 者 line- 
height:1.5em 等 ， 此 处 em 是 一 个 相对 于 font-size 的 相对 单 
位 ， 因 此 ，1Line-height:1.5em 最 终 的 计算 值 也 是 和 当前 font- 
size 相 乘 后 的 值 。 例 如 ， 假 设 我 们 此 时 的 font-size 大 小 为 14px 
， 则 1ine-height 计算 值 是 1.5*14px=21px 。 


乍 一 看 ， 人 似乎 line-height:1.5 、1line-height:156% 和 1line- 
height:1.5em 这 3 种 用 法 是 一 模 一 样 的 ， 最 终 的 行 高 大 小 都 是 和 font- 
size 计算 值 ， 但 是 ， 实 际 上 ，1line-height:1.5 和 另外 两 个 有 一 点 儿 
不 同 ， 那 就 是 继承 细节 有 上 所 差别 。 如 果 使 用 数值 作为 1ine-height 的 
属性 值 ， 那 么 所 有 的 子 元 又 继承 的 都 是 这 个 值 ; 但是， 如 果 使 用 百分比 








值 或 者 长 度 值 作为 属性 值 ， 那 么 所 有 的 子 元 素 继承 的 是 最 终 的 计算 值 。 
什么 意思 呢 ? 比方 说 下 面 3 段 CSS 代 码 : 


body { 
font-size: 14px; 
line-height: 1.5; 


} 


body { 
font-size: 14px; 
line-height: 156%; 
} 


body { 
font-size: 14px; 
line-height: 1.5em; 
} 





对 于 <body> 元 素 而 言 ， 上 面 3 段 CSS 最 终 的 行 高 计算 值 是 21px 是 没有 
任何 区 别 的 ， 但 是 ， 如 果 同 时 还 有 子 元 素 ， 例 如 : 





h3, p { margin: 6; } 
h3 { font-size: 32px; } 
p { font-size: 26px; } 


<h3> 标 题 </h3> 
<p> 内 容 </p> 





结果 line-height:156% 和 1line-height:1.5em 的 最 终 表 现 是 “ 标 
题 "文字 和 "内 容 ” 文 字 重 登 在 了 一 起 ， 如 图 5-13 所 示 。 








俗话 讲 “ 没 有 对 比 束 没有 伤害 *， 我 们 来 看 看 1ine-height:1.5 的 
最 终 表 现 ， 排 版 令 人 舒畅 ， 如 图 5-14 所 示 。 


0 
俩 时 





图 5-13 ”文字 重 登 





标题 
内 容 
图 5-14 ”文字 正常 排版 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/2-5.php 或 者 扫 右 侧 的 
二 维 码 。 





line-height:156% 和 1ine-height:1.5em 代码 下 的 文字 重 夺 的 
原因 在 于 <h3> 和 <p> 元 素 继承 的 并 不 是 156% 或 者 1.5em ， 而 是 <body> 
元 素 的 line-height 计算 值 21px ， 也 就 是 说 ，<h3> 和 <p> 元 素 的 行 高 
都 是 21px ， 考 虑 到 <h3> 的 font-size 大 小 为 32px ， 此 时 <h3> 的 半 行 
间距 就 是 -5.5px ， 因 而 “标题 ”文字 和 下 面 的 “内 容 ” 文 字 发 生 重 登 。 


但 是 line-height:1.5 的 继承 则 不 同 ，<h3> 和 <p> 元 素 的 line- 
height 继承 的 不 是 计算 值 ， 而 是 属性 值 1.5 ， 因 此 ， 对 于 <h3> 元 素 ， 
此 时 的 行 高 计算 值 是 1.5*32px=48px ，<p> 元 素 的 行 高 计算 值 


是 1.5*26px=36px ， 于 是 ， 则 距 合 理 ， 排 版 舒适 。 


实际 上 ，1ine-height:156% 、line-height:1.5em 要 想 有 类 
似 line-height:1.5 的 继承 效果 ， 也 是 可 以 实现 的 ， 类 似 下 面 的 CSS 
代码 : 


* { 
line-height: 156%; 
} 








就 是 使 用 通配符 * 匹配 所 有 的 元 素 。 有 人 可 能 会 疑问 : 既然 Line- 
height 数值 可 以 让 元 素 天 然 继承 相对 计算 特性 ， 那 这 里 的 通配符 岂 不 


完全 没 必要 ? 





其 实 非 也 ， 两 者 还 是 有 差别 的 。HTML 中 的 很 多 替换 元 素 ， 尤 其 表 
单 类 的 蔡 换 元 素 ， 如 输入 框 、 按 钮 之 类 的 ， 很 多 具有 继承 特性 的 CSS 属 
性 其 自己 也 有 一 套 ， 如 font-family 、font-size 以 及 这 里 的 line- 
height 。 由 于 继承 是 属于 最 弱 的 权重 ， 因 此 body 中 设置 的 line- 
height 是 无 法 影响 到 这 些 蔡 换 元 又 的 ， 但 是 作为 一 个 选择 器 ， 就 不 一 
样 了 ， 会 直接 重 置 这 些 蔡 换 元 素 默认 的 line-height ， 这 其 实 是 我 们 
需要 的 ， 因 此 从 道义 上 讲 ， 使 用 通 配 也 是 合理 的 。 但 又 考虑 到 * 的 性 能 
以 及 明明 有 继承 却 不 好 好 利用 的 羞耻 感 ， 我 们 可 以 折 中 使 用 下 面 的 方 
法 : 











body { 
line-height: 1.5; 


} 
input，button { 
line-height: inherit; 


} 


| | 


说 这 么 多 其 实 还 是 为 了 解决 一 开始 的 问题 : line-height 应 该 重 
置 为 多 大 的 值 呢 ? 是 使 用 数值 、 百 分 比值 还 是 长 度 值 呢 ? 








下 面 是 我 的 答案 ， 如果 我 们 做 的 是 一 个 重 图 文 内 容 展示 的 网 页 或 者 
网 站 ， 如 博客 、 论 坛 、 公 众 号 之 类 的 ， 那 一 定 要 使 用 数值 作为 单位 ， 考 
虑 到 文章 阅读 的 舒适 度 ，Line-height 值 可 以 设置 在 1.6 一 1.8。 如 果 是 
一 个 偏重 布局 结构 精致 的 网 站 ， 则 在 我 看 来 使 用 长 度 值 或 者 数值 都 是 可 
以 的 ， 因 为 ， 第 一 ， 我 们 的 目的 是 为 了 兼容 ; 第 二 ， 无 论 使 用 哪 种 类 型 
值 ， 都 存在 需要 局 部 重 置 的 场景 。 不 过 ， 根 据 我 的 统计 ， 基 本 上 各 大 站 
点 都 是 使 用 数值 作为 全 局 的 line-height 值 。 不 过 ， 这 并 不 表示 使 用 
数值 就 一 定 是 最 好 的 ， 如 果 网 站 内 容 的 样式 不 是 动态 不 可 控 的 ， 有 时 
候 ， 固 定 的 长 度 值 反 而 更 利于 精确 布局 。 因 此 ， 不 要 盲目 跟风 。 那 具体 
设置 的 值 应 该 是 多 大 呢 ? 




















如 果 使 用 的 是 长 度 值 ， 我 建议 直接 line-height:26px ， 排 版 时 候 
计算 很 方便 。 


如 果 随 大 流 使 用 的 是 数值 ， 我 建议 最 好 使 用 方便 计算 的 行 高 值 ， 一 
种 是 line-height 属性 值 本 身 方便 计算 ， 为 一 种 是 line-height 的 默 
认 计 算 值 方便 计算 。 比 方 说 ，1.3、1.4、1.5 都 有 大 型 网 站 使 用 ， 我 们 就 
不 妨 使 用 1.5 ， 因 为 心算 1.4*16px 要 比 1.5*16px 难 多 了 ， 这 就 是 第 一 
种 “属性 值 本 里 方 便 计算 ” 而 另外 一 种 “默认 计算 值 方便 计算 ?是 我 们 先 
得 到 方便 计算 的 line-height 计算 值 ， 然 后 倒 推 Iine-height 应 该 使 
用 的 数值 是 多 大 ， 例 如 26px 是 一 个 非常 方便 的 计算 值 ， 如 果 <bodyy> 默 
认 重 置 的 font-size 是 14px ， 则 line-height 数值 应 该 是 


26px/14px=1.4285714285714286 四 售 五 入 的 结果 ， 于 是 得 到 : 


body { 
line-height: 1.42857; 


font-size: 14px; 


} 








不 好 意思 ， 给 大 家 下 套子 了 。 注 意 ， 在 CSS 中 ， 计 算 行 高 的 时 候 ， 
行 高 值 一 定 不 要 向 下 舍 入 ， 而 要 向 上 舍 入 。 上 面 虽然 14*1.42857 计 算 
机 近乎 是 28px ， 但 在 Chrome 浏 览 嚣 下， 依然 以 19px 的 高 度 呈 现 ， 如 
果 我 们 向 上 人 钨 入 取 1.42858， 则 最 终 所 有 浏览 器 行 高 计算 值 是 20px， 代 
码 示意 如 下 : 





body { 
line-height: 1.42858; 
font-size: 14px; 


} 





5.2.4 ”内 联 元 素 line-height 的 “大 值 特性 ” 


理解 了 下 面 这 个 案例 ， 就 真正 理解 了 内 联 元 素 line-height 。 
此 ， 放 在 最 后 算是 对 line-height 的 总 结 和 知识 测验 吧 。 此 例子 HTML 
都 是 一 样 的 : 


<div class="box"> 
<span> 内 容 ...</spany> 


</div> 





CSS 代 码 有 所 不 同 ， 分 别 为 


.box { 
line-height: 96px; 


} 

.box span { 
line-height: 26px; 

} 





和 


.box { 
line-height: 26px; 
} 


.box span { 
line-height: 96px; 
} 








也 就 是 一 个 子 元 素 行 高 是 28px ， 一 个 是 96px ， 假 如 文字 就 1 行 ，. box 
元 素 的 高 度 分 别 是 多 少 ? 


按照 我 们 以 前 考试 做 选择 题 的 套路 ， 非 A 即 B: 按照 经 验 ， 子 元 素 
行 高 覆盖 父 元素 ， 应 该 高 度 等 于 <span> 元 素 的 高 度 ， 分 别 是 26px 
、96px ; 但 由 于 基本 功 不 够 扎实 ， 并 不 确定 内 联 元 素 是 否 文 持 line- 
height ， 如 果 不 支 持 ， 那 应 该 跟着 .box 元 素 的 行 高 走 ， 高 度 应 该 
是 96px 、26px 。 总 之 ， 肯 定 就 这 两 个 答案 之 间 ! 











好 ， 如 果 大 家 也 有 和 上 面 类 似 的 想法 ， 那 么 建议 还 要 再 细 细 读 一 读 
前 面 的 内 容 。 正 确 的 答案 是 : 全 都 是 96px 高 ! 


还 不 信 ? 可 以 看 一 下 演示 示例 ， 手 动 输入 
http://demo.cssworld.cn/5/2-6.php 或 者 扫 下 面 的 二 维 码 。 效 果 如 图 5-15 所 
示 ( 截 自 正 浏览 器 ) 。 





span: line-height:20px 


span: line-height:96px 





图 5-15 ” .box 元 素 的 高 度 均 是 96px 





也 就 是 说 : 无 论 内 联 元 素 1ine-height 如 何 设置 ， 最 终 父 级 元 素 
的 高 度 都 是 由 数值 大 的 那个 Line-height 决定 的 ， 我 称 之 为 “内 联 元 
素 1ine-height 的 大 值 特性 ”。 


可 能 很 多 人 会 有 疑问 : 为 什么 会 这 样 ? 逻辑 上 讲 不 通 啊 ? 


首先 ， 要 明确 一 点 : 内 联 元 素 是 支持 line-height 的 <span> 元 素 
上 的 line-height 也 确实 履 盖 了 .box 元 素 ， 但 是 ， 在 内 联 盒 模型 中 ， 
存在 一 些 你 看 不 到 的 东西 ， 没 错 ， 就 是 多 次 提 到 的 “幽灵 空白 节点 ”。 


正好 再 次 《也 是 最 后 一 次 ) 温习 一 下 “内 联 盒 模型 ”的 知识 。 这 里 的 
<span> 是 一 个 内 联 元 素 ， 因 此 上 自身 是 一 个 “内 联 盒子 ”， 本 例 就 这 一 
个 “内 联 盒 子 ”， 只 要 有 “内 联 盒 子 ” 在 ， 就 一 定 会 有 “ 行 框 盒子”"， 就 是 每 
一 行内 联 元 素 外 面包 衷 的 一 层 看 不 见 的 盒子 。 然 后 ， 重 点 来 了 ， 在 每 
个 “ 行 框 盒子 ?前面 有 一 个 宽度 为 6 的 具有 该 元 素 的 字体 和 行 高 属性 的 看 
不 见 的 “ 幽 灵 空 白 节 点 ”， 如 果 套 用 本 案 ， 则 这 个 “幽灵 空 昌 节 点 ”就 
在 <span> 元 素 的 前 方 ， 如 图 5-16 所 示 。 

















“strut” 
class="box"> 
|<span> 内 容 . . .</span> 
</div> 





图 5-16 “幽灵 空白 节点 ”又 名 “strut”) 标注 
于 是 ， 就 效果 而 言 ， 我 们 的 HIML 实 际 上 等 同 于 : 


<div class="box"> 


Eo 


字符 <span> 内 容 ...</span> 


</div> 





这 下 就 好 理解 了 ， 当 .box 元 素 设 置 line-height:96px 时 ,“ 字 
符 ” 高 度 96px ; 当 设 置 1ine-height:26px 时 ，<span> 元 素 的 高 度 则 
变 成 了 96px ， 而 行 框 盒 子 的 高 度 是 由 高 度 最 高 的 那个 “内 联 盒子 ” 诀 定 


的 ， 这 就 是 .box 元 素 高 度 永 远 都 是 最 大 的 那个 Line-height 的 原因 。 























知道 了 原因 也 就 能 够 对 症 下 药 ， 要 避免 “幽灵 空白 节点 ”的 干扰 ， 例 
如 ， 设 置 <span> 元 素 display:inline-block ， 创 建 一 个 独立 的 “ 行 


框 盒子 *， 这 样 <spany> 元 素 设置 的 line-height:28px 就 可 以 生效 了 ， 
这 也 是 多 行文 字 垂 直 拓 中 示例 中 这 么 设置 的 原因 。 


5.3 1line-height 的 好 朋友 vertical-align 


终于 轮 到 line-height 的 好 朋友 vertical-align 上 场 了 ， 为 什 
么 说 它们 是 好 朋友 呢 ? 因为 几 是 1ine-height 起 作用 的 地 方 
vertical-align 也 一 定 起 作用 ， 只 是 很 多 时 候 ，vertical-align 默 
默 地 在 背后 起 作用 ， 你 没有 感觉 到 而 已 。 








很 多 人 都 有 这 样 一 个 错误 的 认 知 ， 认 为 对 于 单行 文本 ， 只 要 行 高 设 
置 多 少 ， 其 占据 高 度 就 是 多 少 。 比 方 说 ， 对 于 下 面 非常 简单 的 CSS 和 
HTML 代 码 : 
.box { line-height: 32px; } 


.box > span { font-size: 24px; } 
<div class="box"> 


<span> 文 字 </span> 
</divy> 











.box 元 素 的 高 度 是 多 少 ? 





很 多 人 一 定 认为 是 32px : 因为 没有 设置 height 等 属性 ， 高 度 就 
由 1ine-height 决定 ， 与 font-size 无 关 ， 所 以 这 里 明摆着 最 终 高 度 
就 是 32px 。 


但 是 事实 上 ， 高 度 并 不 是 32px ， 而 是 要 大 那么 几 像素 ( 受 不 同 字 
体 影响 ， 增 加 高 度 也 不 一 样 ) ， 比 方 说 36px ， 如 图 5-17 所 示 。 图 5-17 截 


自 此 示例 页 面 : http://demo.cssworld.cn/5/3-1.php。 








图 5-17 单行 文本 容器 高 度 不 等 于 行 高 


这 里 ， 之 所 以 最 终 .box 元 素 的 高 度 并 不 等 于 Line-height ， 就 是 
因为 行 高 的 朋友 属性 vertical-align 在 背后 默默 地 下 了 黑手 。 


vertical-align 知识 点 比 line-height 要 多 ， 我 们 现在 就 来 一 
点 一 点 地 揭 开 vertical-align 属性 的 层 层 面纱 。 


5.3.1 vertical-align 家 族 基本 认识 


抛 开 inherit 这 类 全 局 属性 值 不 谈 ， 我 把 vertical-align 属性 值 
分 为 以 下 4 类 : 


。 线 类 ， 如 baseline (默认 值 ) 、top 、middle 、bottonm; 
。 文 本 类 ， 如 text-top 、text-bottom; 

。 上 标 下 标 类 ， 如 sub 、super:; 

。 数值 百分比 类 ， 如 26px 、2em 、26% 等 。 


实际 上 , “数值 百分比 类 ”应 该 是 两 类 ， 分 别 是 “数值 类 ”和 “百分比 
类 ”， 这 里 之 所 以 把 它们 合 在 一 起 归 为 一 类 ， 是 因为 它们 有 不 少 共性 ， 
包括 “都 带 数 字 ” 和 "行为 表现 一 致 ”。 














“都 带 数 字 ” 略 市 戏 诺 之 意 ， 没 什么 好 说 的 。“ 行 为 表现 一 致 * 表 示 具 
有 相同 的 泻 染 规则 ， 具 体 为 : 根据 计算 值 的 不 同 ， 相 对 于 基线 往 上 或 往 





下 偏 移 ， 到 底 是 往 上 还 是 往 下 取 诀 于 vertical- align 的 计算 值 是 正 
值 还 是 负 值 ， 如 果 是 负 值 ， 往 下 偏 移 ， 如 果 是 正 值 ， 往 上 偏 移 。 


为 了 更 好 地 演示 vertical-align 数值 类 属性 值 的 表现 ， 我 特意 做 
了 个 演示 页 面 ， 手 动 输入 http://demo.cssworld.cn/5/3-2.php 或 者 扫 右 侧 的 
二 维 码 。 





由 于 vertical-align 的 默认 值 是 paseline ， 即 基线 对 齐 ， 而 基 
线 的 定义 是 字母 x 的 下 边缘 。 因 此 ， 内 联 元 素 默 认 都 是 沿 着 字母 x 的 下 边 
缘 对 齐 的 。 对 于 图 厂 等 蔡 换 元 素 ， 往 往 使 用 元 素 本 里 的 下 边缘 作为 基 
线 ， 因 此 ， 进 入 上 面 的 演示 页 面 ， 看 到 的 是 图 5-18 所 示 的 图 文 排列 效 
果 。 











由 于 是 相对 字母 x 的 下 边缘 对 齐 ， 而 中 文 和 部 分 吴 文 字形 的 下 边 毕 
要 低 于 字母 x 的 下 边缘 ， 因 此 ， 会 给 人 感觉 文字 是 明显 偏 下 的 ， 一 般 都 
会 进行 调整 。 比 方 说 ， 我 们 给 文字 内 容 设 置 vertical- align:168px 
， 则 文字 内 容 束 会 在 当前 基线 位 置 再 往 上 精确 偏 移 186px ， 效 果 如 图 5- 
19 所 示 。 

















母 X 
图 5-18 ”默认 的 图 文 对 齐 表现 





母 x 





文字 的 vertical-align 值 : |3 10px 区 
图 5-19 vertical-align:16px 偏 移 后 的 效果 


演示 页 面 还 提供 了 很 多 其 他 可 供 选 择 的 vertical-align 值 ， 经 过 
一 番 试 验 读者 就 会 发 现 ， 正 如 上 面 所 说 ， 负 值 全 部 都 是 往 下 偶 移 ， 正 值 
全 部 都 是 往 上 偶 移 ， 而 且 数 值 大 小 全 部 都 是 相对 于 基线 位 置 计算 的 ， 
此 ， 从 这 一 点 来 看 ，vertical-align:baseline 等 同 于 vertical- 








align:6 。 








说 到 这 里 ， 我 就 忍 不 住 多 说 两 句 。 很 多 即使 工作 很 多 年 的 前 端 开发 
人 员 ， 也 可 能 不 知道 vertical-align 的 属性 值 支持 数值 ， 更 不 知道 支 
持 负 值 ， 这 着 实 让 我 很 意外 。 如 果实 用 性 差 那 还 好 理解 ， 关 键 
是 vertical-align 的 数值 属性 值 在 实际 开发 的 时 候 实用 性 非常 强 。 





一 是 其 兼容 性 非常 好 。 在 之 前 ，vertical-align 属性 的 兼容 性 被 
开发 人 员 诉 病 已 入 ， 因 为 需要 兼容 IE6 和 下 7 浏览 器 ， 而 这 些 浏览 器 的 
vertical-align 关键 字 属 性 值 (如 middle 、text-top 等 ) 的 泻 染 规 
则 和 其 他 浏览 器 大 相 径 庭 ， 很 多 人 不 知道 vertical-align 还 可 以 使 用 


数值 作为 属性 值 ， 结 果 CSS hack 满 天 飞 。 实 际 上 ，vertical-align 有 
一 些 属性 值 的 演 染 一 直 都 很 兼容 ， 一 个 是 默认 的 基线 对 齐 ， 另 一 个 就 是 
相对 于 基线 的 “数值 百分比 类 ”属性 值 偏 移 定位 。 也 就 是 说 ， 如 果 我 们 使 
用 类 似 vertical-align:16px 这 样 的 定位 ， 是 不 会 有 任何 兼容 性 问题 
的 ， 也 不 需要 写 CSS hack。 














二 是 其 可 以 精确 控制 内 联 元 素 的 垂直 对 齐 位置 。vertical-align 
属性 的 规范 和 统一 从 下 8 浏览 右 开 始 ， 由 于 我 们 现在 都 不 需要 兼容 IF8 以 
前 的 浏览 器 ，middle 、text-top 等 关键 字 属 性 值 可 以 畅快 使 用 ， 但 是 
这 些 关 键 字 有 一 个 严重 的 不 足 ， 就 是 垂直 对 齐 位 置 是 固定 的 ， 往 往 最 后 
并 不 是 我 们 想 要 的 像素 级 精确 对 齐 效果 ， 此 时 ， 还 是 需要 借助 “数值 百 
分 比 类 ”属性 值 才 可 以 。 








我 们 不 妨 看 一 个 简单 的 小 图 标 对 齐 的 例子 。 





假设 有 一 个 display 值 为 jnline-block 的 尺寸 为 20 像 素 x20 像 素 
的 小 图 标 ， 默 认 状 态 下 ， 文 字 是 明显 偏 下 的 ， 类 似 图 5-20 中 “请 选择 ”三 
个 字 和 后 面 三 角 图 形 的 位 置 关 系 。 





这 里 ， 我 们 需要 的 是 垂直 居中 对 齐 效果 ， 上 所 以 很 多 人 都 使 用 具有 强 
烈 语 义 的 vertical- align:middle 控制 图 标的 垂直 位 置 ， 然 而 ， 由 
于 middle 并 不 是 真正 意义 上 的 垂直 居中 ， 因 此 还 是 会 有 像素 级 别 的 误 
差 ， 误 差 大 小 与 字体 和 字号 均 有 关 。 例 如 ， 在 本 例 中 ， 图 标 往 下 多 偏 移 
了 1 像素 而 导致 容 器 的 可 视 高 度 变 成 了 21 像 素 ， 如 图 5-21 所 示 。 











请 选择 


图 5-20 ”文字 位 置 比 图 标 低 


请 选择 > 


图 5-21 middle 属 性 导致 过 多 偏 移 从 而 使 容器 尺寸 超出 预期 





但 是 ， 如 果 我 们 使 用 精确 的 数值 ， 则 一 切 尽 在 掌控 之 中 。 例 如 ， 设 
置 vertical-align: -5px ， 此 时 ， 图 标 和 文字 实现 了 真正 意义 上 的 
垂直 居中 ， 此 时 容器 的 可 视 高 度 和 当前 行 高 20 像 素 保持 了 一 致 ， 如 网 5- 
22 所 示 。 眼 见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/3-3.php 或 者 扫 下 
面 的 二 维 码 。 





图 5-22 -5px 实 现 的 完美 的 垂直 居中 











说 完 “ 数 值 类 ”和 “百分比 类 ”属性 值 的 行为 表现 ， 下 面 再 简单 说 说 平 
时 使 用 并 不 多 的 “百分比 类 ”属性 值 。 





在 CSS 世 界 中 ， 几 是 百分比 值 ， 均 是 需要 一 个 相对 计算 的 值 ， 例 


如 ，margin 和 padding 是 相对 于 宽度 计算 的 ，Line-height 是 相对 于 
font-size 计算 的 ， 而 这 里 的 vertical- align 属性 的 百分比 值 则 是 
相对 于 line-height 的 计算 值 计 算 的 。 可 见 ，CSS 志 界 中 的 各 类 属性 相 
互 间 有 着 紧密 联系 而 非 孤立 的 个 体 。 





假设 某 元 素 的 line-height 是 28px ， 那 么 此 时 vertical- 
align:-25% 相当 于 设置 vertical-align:-5px 。 按 照 之 前 学 到 的 知 
识 ， 会 发 现 百 分 比值 无 论 什么 时 候 都 很 实用 ， 因 此 会 给 人 感觉 
vertical-align 的 百分比 属性 值 也 会 非常 实用 ， 但 是 事实 上 ， 平 时 开 
发 中 很 少 使 用 。 原 因 在 于 ， 在 如 今 的 网 页 布局 中 ，1line-height 的 计 
算 值 都 是 相对 固定 并 且 己 知 的 ， 因 此 ， 直 接 使 用 具体 的 数值 反而 更 方 
便 。 比 方 说 上 面 小 图 标 对 齐 的 例子 ， 我 们 肯定 会 直接 vertical- 
align:-5px ， 而 不 会 使 用 vertical-align:-25% ， 因 为 后 者 还 要 重 
新 计算 ， 并且 很 多 时 候 是 除 不 尽 的 ， 除 了 装 门面 以 外 ， 我 是 想不到 还 有 
其 他 使 用 的 理由 了 。 








这 就 是 为 什么 “百分比 类 ”属性 值 “简单 说 说 ”的 原因 了 。 
5.3.2 vertical-align 作用 的 前 提 


很 多 人 ， 尤 其 CSS 新 手 ， 会 问 这 么 一 个 问题 : “为 什么 我 设置 了 
vertical-align 却 没 任何 作用 ?” 


因为 vertical-align 起 作用 是 有 前 提 条 件 的 ， 这 个 前 提 条 件 就 
是 : 只 能 应 用 于 内 联 元 素 以 及 display 值 为 table-cell 的 元 素 。 








换 句 话说 ，vertical-align 属性 只 能 作用 在 display 计算 值 


为 inline 、inline- block ，inline-table 或 table-cell 的 元 素 
上 。 因 此 ， 默 认 情况 下 ，<span> 、《< _ strong> 、<em> 等 内 联 元 

素 ，<img> 、<button> 、<input> 等 蔡 换 元 素 ， 非 HTML 规 范 的 目 定 
义 标签 元 素 ， 以 及 <td> 单元 格 ， 都 是 文 持 vertical-align 属性 的 ， 
其 他 块 级 元 陛 则 不 文 持 。 


当然 ， 现 实 世界 是 没有 这 么 简单 的 。CSS 世 界 中 ， 有 一 些 CSS 属 性 
值 会 在 背后 默默 地 改变 元 素 display 属性 的 计算 值 ， 从 而 导致 
vertical-align 不 起 作用 。 比 方 说 ， 浮 动 和 绝对 定位 会 让 元 素 块 状 
人 化， 因此， 下 面 的 代码 组 合 vertical-align 是 没有 理由 出 现 的 : 





.example { 
float: left; 
vertical-align: middle; /* 没有 作用 */ 





} 
.example { 

position: absolute; 

vertical-align: middle; /* 没有 作用 */ 
} 








等 等 ， 我 好 像 听 到 有 人 说 :“ 不 是 vertical-align 没有 作用 ， 而 


是 下 面 这 种 情况 。” 


国 
总 


.box { 
height: 128px; 

} 

.box > img { 
height: 96px; 
vertical-align: middle; 


} 

<div class="box"> 
<img src="1.jpg"> 

</div> 





此 时 图 片 顶 着 .box 元 素 的 上 边缘 显示 ， 根 本 没 垂 直 居 中 ， 完 全 没 起 作 
用 ! 


这 种 情况 看 上 去 是 vertical-align:middle 没 起 作用 ， 实 际 
上 ，vertical-align 是 在 努力 地 泻 染 的 ， 只 是 行 框 盒子 前 面 的 “幽灵 
空 日 节点 ”高 度 太 小 ， 如 果 我 们 通过 设置 一 个 足够 大 的 行 融 让 “幽灵 空白 
节点 "高度 足 够 ， 就 会 看 到 vertical-align:middle 起 作用 了 ， CSS 
代码 如 下 : 








.box { 
height: 128px; 
line-height: 128px;  /* 关键 CSS 属 性 











} 


.box > img { 
height: 96px; 
vertical-align: middle; 





等 等 ， 我 又 听 到 有 人 说 :“ 为 什么 display:table-cell 却 可 以 无 


告诉 你 ， 那 是 因为 对 table-cell 元 素 而 言 ，vertical-align 起 
作用 的 是 table-cell 元 素 目 身 。 不 妨 看 下 面 一 段 代 码 : 





.cell { 
height: 128px; 
display: table-cell; 
} 
.cell > img { 
height: 96px; 
vertical-align: middle; 
} 
<div class="cell"> 
<img src="1.jpg"> 
</div> 


[L 


结果 图 片 并 没有 要 垂直 居中 的 迹象 ， 还 是 紧 贴 着 父 元 素 的 上 边缘 ， 
如 图 5-23 所 示 。 





但 是 ， 如 果 vertical-align:middle 是 设置 在 table-cell 元 素 
上 ，CSS 代 码 如 下 : 


.Cell { 
height: 128px; 
display: table-cell; 
vertical-align: middle; 


} 

.Cell > img { 
height: 96px; 

} 





那么 图 片 就 有 了 明显 的 变化 ， 如 图 5-24 所 示 。 





图 5-23 ”图 片 的 vertical-align:middle 没有 效果 





图 5-24 table-cell 元 素 vertical-align:middle 有 效果 


所 以 ， 大 家 一 定 要 明确 ， 虽 然 就 效果 而 言 ，table-cel1l 元 系 设 
置 vertical-align 垂直 对 齐 的 是 子 元 素 ， 但 是 其 作用 的 并 不 是 子 元 
素 ， 而 是 table-cell 元 素 上 自身 。 了 就 算 table-cel1 元 素 的 子 元 素 是 一 
个 块 级 元 素 ， 也 一 样 可 以 让 其 有 各 种 垂直 对 齐 表现 。 














table-cell 垂直 对 齐 有 对 应 的 演示 页 面 ， 手 动 输入 
http://demo.cssworld.cn/ 5/3-4.php 或 者 扫 右 侧 的 二 维 码 。 





5.3.3 vertical-align 和 line-height 之 间 的 关系 


vertical-align 和 1line-height 之 间 的 关系 很 明确 ， 即 “朋友 ” 关 
系 。 





最 明显 的 就 是 vertical-align 的 百分比 值 是 相对 于 line-height 
计算 的 ， 但 表面 所 见 的 这 点 关系 实际 是 只 是 冰山 一 角 ， 实 际 是 只 要 出 现 
内 联 元 素 ， 这 对 好 朋友 一 定 会 同时 出 现 。 








还 记 不 记得 一 开始 容器 高 度 不 等 于 行 
(http://demo.cssworld.cn/5/3-1.php) ? 这 ; 





高 的 例子 
吕 是 这 对 好 朋友 搞 的 鬼 。 


要 为 大 家 深入 讲解 一 下 为 什么 会 出 现 这 样 的 现象 。 首 先 ， 我 们 仔细 看 一 
下 相关 的 代码 : 
.box { line-height: 32px; } 


.box > span { font-size: 24px; } 
<div class="box"> 


<span> 文 字 </span> 
</div> 





其 中 有 一 个 很 关键 的 点 ， 那 就 是 24px 的 font-size 大 小 是 设置 
在 <span> 元 素 上 的 ， 这 就 导致 了 外 部 divy> 元 素 的 字体 大 小 和 <span> 
元 素 有 白 大 出 大 。 





大 家 一 定 还 记得 图 5-16。 这 里 也 是 类 似 的 ，<span> 标签 前 面 实际 
上 有 一 个 看 不 见 的 类 似 字 符 的 “幽灵 空白 节点 ”。 看 不 见 的 东西 不 利于 理 
解 ， 因 此 我 们 不 妨 使 用 一 个 看 得 见 的 字符 x 占 位 ， 同 时 “文字 ”后 面 也 添 
加 一 个 x， 便 于 看 出 基线 位 置 ， 于 是 就 有 如 下 HTML: 








<div class="box"> 
x<span> 文 字 x</span> 
</div> 


此 时 ， 我们 可 以 明显 看 到 两 处 大 小 完全 不 同 的 文字 。 一 处 是 字母 x 
构成 了 一 个 “匿名 内 联 使 和子”， 另 一 处 是 “文字 x” 所 在 的 <span> 元 素 ， 构 
成 了 一 个 “内 联 盒子 ”。 由 于 都 受 l1ine- height:32px 影响 ， 因 此 ， 这 
两 个 “内 联 盒子 ”的 高 度 都 是 32px 。 下 面 关键 的 来 了 ， 对 字符 而 
言 ，font-size 越 大 字符 的 基线 位 置 越 往 下 ， 因 为 文字 默认 全 部 都 是 基 
线 对 齐 ， 所 以 当 字 号 大 小 不 一 样 的 两 个 文字 在 一 起 的 时 候 ， 彼 此 就 会 发 
生 上 下 位 移 ， 如 有 果 位 移 距离 足够 大 ， 束 会 超过 行 蜗 的 限制 ， 而 导致 出 现 





意料 之 外 的 高 度 ， 如 图 5-25 所 示 。 


本 又 基线 对 齐 ， 上 下 位 移 I! ::. xy 葡 本 X 
DP 








图 5-25 ”不 同 字 号 文字 高 度 超出 行 高 示意 





图 5-25 非 第 直观 地 说 明了 为 何 最 后 容器 的 高 度 会 是 36px ， 而 
非 line-height 设置 的 32px 。 


知道 了 问题 发 生 的 原因 ， 那 问题 就 很 好 解决 了 。 我 们 可 以 让 “幽灵 
空白 节点 ”和 后 面 <span> 元 素 字 号 一 样 大 ， 也 就 是 : 


.box { 
line-height: 32px; 
font-size: 24px; 


.box > span { } 








或 者 改变 垂直 对 齐 方式 ， 如 顶部 对 齐 ， 这 样 就 不 会 有 参差 位 移 了 : 


.box { line-height: 32px; } 
.box > span { 
font-size: 24px; 


vertical-align: top; 


} 











搞 清 楚 了 大 小 字号 文字 的 高 度 问题 ， 对 更 为 常见 的 图 片 底部 留 有 间 
隙 的 问题 的 理解 束 容 易 多 了 。 现 象 是 这 样 的， 任意 一 个 块 级 元 系 ， 里 面 
大 有 图 片 ， 则 块 级 元 素 高 度 基 本 上 都 要 比 图 片 的 高 有 度 电 。 例 如 : 


.box { 
width: 286pX; 








outline: 1px solid #aaa; 
text-align: center; 
} 
.box > img { 
height: 96px; 
} 
<div class="box"> 
<img src="1.jpg"> 
</div> 








结果 .box 元 系 的 高 度 可 能 就 会 像 图 5-26 一 样 ， 底 部 平 白 无 故 多 了 5 像 


素 9 





间隙 产生 的 三 大 元 凶 束 是 “幽灵 空白 节点 *”、line-height 和 
vertical-align 属性 。 为 了 直观 演示 原理 ， 我 们 可 以 在 图 片 前 面 辅助 
一 个 字符 x 代 奉 “幽灵 空白 节点 ”"， 并 想 办 法 通过 背景 色 显 示 其 行 高 范 
围 ， 于 是 ， 大 家 就 会 看 到 如 图 5-27 所 示 的 现象 。 














a 


图 5-26 图片 底 部 间 际 示意 





X 





图 5-27 ”图片 间 际 原 理 示意 


当前 line-height 计算 值 是 28px ， 而 font-size 只 有 14px ， 


此 ， 字 母 x 往 下 一 定 有 至 少 3px 的 半 行 间距 (具体 大 小 与 字体 有 关 》， 
而 图 族 作 为 蔡 换 元 素 其 基线 是 自 喘 的 下 边缘 。 根 据 定 义 ， 默 认 和 基线 
《也 就 是 这 里 字母 x 的 下 边缘 ) 对 齐 ， 字 母 x 往 下 的 行 高 产生 的 多 余 的 间 
际 就 逮 祸 到 图 片 下 面 ， 让 人 以 为 是 图 片 产生 的 间 际 ， 实 际 上 ， 是 “幽灵 
空白 节点 ”line-height 和 vertical-align 属性 共同 作用 的 结 




















知道 了 原理 ， 要 清除 该 间隙 ， 残 知道 如 何 对 症 下 药 了。 方法 很 多 ， 
具体 如 下 。 


(1) 图 片 块 状 化 。 可 以 一 口气 干掉 “幽灵 空白 节点 ”、1Line- 
height 和 vertical-align 。 





(2) 容器 line-height 足够 小 。 只 要 半 行 间距 小 到 字母 x 的 下 边 
缘 位 置 或 者 再 往 上 ， 自 然 束 没有 了 撑 开 底部 间 隐 高 度 空间 了 。 比 方 说 ， 
容器 设置 1ine-height:6 。 











(3) 容器 font-size 足够 小 。 此 方法 要 想 生 效 ， 需 要 容器 的 
line-height 属性 值 和 当前 font-size 相关 ， 如 line-height:1.5 或 
者 1ine-height:156% 之 类 ; 否则 只 会 让 下 面 的 间 际 变 得 更 大 ， 因 为 基 
线 位 置 因 字符 x 变 小 而 往 上 升 了 了。 








(4) 图 片 设置 其 他 vertical-align 属性 值 。 间 隙 的 产生 原因 之 
一 就 是 基线 对 齐 ， 所 以 我 们 设置 vertical-align 的 值 为 top、 
middle、bottom 中 的 任意 一 个 都 是 可 以 的 。 








以 上 所 有 方法 在 演示 页 面 中 均 有 对 应 的 效果 展示 ， 手 动 输入 http:// 
demo.cssworld.cn/5/3-5.php 或 者 扫 右 侧 的 二 维 码 。 











在 4.3.5 节 最 后 提 到 了 一 个 “内 联 特性 导致 的 margin 无 效 ” 的 案例 ， 
代码 如 下 : 


<div class="box"> 
<img src="mm1.jpg"> 

</div> 

.box > img { 


height: 96px; 
margin-top: -2060pX; 
} 





此 时 ， 按 照 理 解 ，-266px 远 远 超过 图 片 的 高 度 ， 图 片 应 该 完全 跑 
到 容器 的 外 面 ， 但 是 ， 图 片 依然 有 部 分 在 .box 元 素 中 ， 而 且 就 算 
margin-top 设置 成 -99999px ， 图 片 也 不 会 继续 往 上 移动 ， 完 全 失 
效 。 其 原理 和 上 面 图 片 底部 留 有 间 际 实际 上 是 一 样 的 ， 图 片 的 前 面 有 
个 “幽灵 空白 节点 ”， 而 在 CSS 世 界 中 ， 非 主动 触发 位 移 的 内 联 元 又 是 不 
可 能 跑 到 计算 容器 外 面 的 ， 导 致 图 片 的 位 置 被 “幽灵 空 日 节点 ”的 
vertical-align:baseline 给 限 死 了 。 我 们 不 妨 把 看 不 见 的 “幽灵 空 
日 节点 ”使 用 字符 X 人 代替 ， 原 因 就 一 目 了 然 了 ， 如 图 5-28 所 示 。 








moarg ww-top -200p%; 





X 


图 5-28 vertical-align 导致 nargin 负 值 无 效 





因为 字符 x 下 边缘 和 图 片 下 边缘 对 齐 ， 字 符 x 非 主动 定位 ， 不 可 能 跑 
到 容 占 外 面 ， 所 以 图 片 就 被 限 死 在 此 问题 ,margin-top 失效 。 


最 后 ， 我 们 再 看 一 个 更 为 复杂 的 示例 。text-align:jusitfy 声明 
可 以 帮助 我 们 实现 兼容 的 列表 两 端 对 齐 效果 ， 但 是 text- 
align:jusitfy 两 端 对 齐 需 要 内 容 超 过 一 行 ， 同 时 为 了 让 任意 个 数 的 
列表 最 后 一 行 也 是 左 对 齐 排列 ， 我 们 需要 在 列表 最 后 辅助 和 列表 宽度 一 
样 的 空 标签 元 素来 占 位 ， 类 似 下 面 HTML 代 码 的 <i> 标签 : 





.box { 
text-align: justify; 


} 

.justify-fix { 
display: inline-block; 
width: 96px; 

} 

<div class="box"> 
<img src="1.jpg" width="96" 
<img src="1.jpg" width="96" 
<img src="1.jpg" width="96" 
<img src="1.jpg" width="96" 
<i class="justify-fix"></i> 
<i class="justify-fix"></i> 
<i class="justify-fix"></i> 

</div> 








空 的 in1ine-b1lock 元 素 的 高 度 是 6 ， 按 照 通 和 常 的 理解 ， 下 面 应 该 
是 一 马 平 川 ， 结 果 却 有 非常 大 的 空 际 存 在 ， 如 图 5-29 所 示 。 


为 了 便于 大 家 看 个 究竟 ， 我 把 占 位 <i> 元 素 的 outline 属性 用 虚 外 
框 标示 一 下 ， 此 时 效果 如 图 5-30 所 示 。 








结果 发 现 ， 上 面 巨 大 的 空隙 是 由 占 位 <i> 元 系 上 面 和 下 面 的 间 际 共 
同 组 成 的 。 








于 是 ， 问 题 来 了 : 上 面 的 间 隐 是 如 何 产生 的 ? 下 面 的 间 隐 是 如 何 产 
生 的 ? 如 果 去 除 这 些 间 隙 呢 ? 





很 多 时 候 ， 复 杂 问 题 是 由 简单 问题 组 合 而 成 的 。 实 际 上 ， 这 里 的 间 
We 都 是 vertical-align 和 
line-height 共同 作用 的 结 


芷 大 办 加 阶 





Pe 





图 5-29 列表 下 面 留 有 巨大 的 间 院 








图 5-30” 占 位 的 <i> 元 素 位 置 示意 


按照 之 前 解决 问题 的 方法 ， 我 们 可 以 直接 给 .box 元 素来 个 Line- 
height:6 解决 垂直 间 际 问题 ， 结 果 ， 这 样 设置 之 后 的 效果 却 如 图 5-31 
所 示 。 图 片 和 图 片 之 间 的 间 际 是 没有 了 ， 但 是 图 片 和 最 后 的 占 位 元 素 之 
间 依 然 有 几 像 素 的 间距 ， 真 有 些 让 人 抓 狂 了 。 这 究竟 是 为 什么 ? 











图 5-31 line-height:6 去 除 间 际 的 效果 图 


简单 现象 的 背后 往往 有 大 的 学 问 ， 要 明白 其 原因 ， 就 需要 说 
到 inline-block 元 素 和 基线 baseline 之 间 的 一 些 纠缠 的 关系 。 


5.3.4 深入 理解 vertical-align 线性 类 属性 值 
1. inline-block 与 baseline 


vertical-align 属性 的 默认 值 baseline 在 文本 之 类 的 内 联 元 素 
那里 就 是 字符 x 的 下 边缘 ， 对 于 蔡 换 元 素 则 是 蔡 换 元 素 的 下 边缘 。 但 
是 ， 如 果 是 inline-block 元 素 ， 则 规则 要 复杂 了 : 一 个 inline- 
block 元 素 ， 如 果 里 面 没 有 内 联 元 素 ， 或 者 overflow 不 是 visible ， 
则 该 元 素 的 基线 就 是 其 margin 底 边 缘 ; 否则 其 基线 就 是 元 素 里 面 最 后 
一 行内 联 元 素 的 基线 。 











还 是 没 反 应 过 来 ? 那 看 下 面 这 个 例子 ， 应 该 就 能 知道 什么 意思 了 。 


两 个 同 尺 寸 的 jnline-block 水 平 元 素 ， 唯 一 区 别 就 是 一 个 是 空 
的 ， 一 个 里 面 有 字符 ， 代 码 如 下 : 


.dib-baseline { 
display: inline-block; 
width: 156px; height: 156pX; 


border: 1px solid #cad5eb; 
background-color: #f6f3f9; 

} 

<span class="dib-baseline"></span> 

<Span class="dib-baseline">x-baselinex</span> 





结果 如 图 5-32 所 示 。 


你 会 发 现 ， 明 明 尺 寸 、display 水 平 都 是 一 样 的 ， 结 果 两 个 却 不 在 
一 个 水 平 线 上 对 齐 ， 为 什么 呢 ? 上 面 的 规范 已 经 说 明了 一 切 。 第 一 个 框 
里 面 没 有 内 联 元 素 ， 因 此 基线 就 是 容 圳 的 margin 下 边缘 ， 也 就 是 下 边 
框 下面 的 位 置 ， 而 第 二 个 框 里 面 有 字符 ， 纯 正 的 内 联 元 素 ， 因 此 第 二 个 
框 就 是 这 些 字符 的 基线 ， 也 束 是 字母 x 的 下 边缘 了 。 于 是 ， 我 们 就 看 到 
了 左边 框框 下 边缘 和 右边 框框 里 面 字符 x 底 边 对 齐 的 好 戏 。 














下 面 我 们 要 做 一 件 很 有 必要 的 事情 ， 来 帮助 我 们 理解 上 面 这 个 复杂 
的 例子 在 line-height 值 为 6 后 的 表现 。 什 么 事情 呢 ? 同情 境 模拟 ， 我 
们 也 设置 右边 框 的 line-height 值 为 6 ， 于 是 ， 就 有 所 图 5-33 所 示 的 表 
现 。 





x-baseline 








图 5-32 ”相同 display 计算 值 相 同 尺 寸 却 不 对 齐 


x-baseline 


图 5-33” 右 侧 设置 1ine-height:8 后 的 对 齐 表 现 





因为 字符 实际 占据 的 高 度 是 由 Line-height 决定 的 ， 当 1ine- 
height 变 成 6 的 时 候 ， 字 符 占 据 的 高 度 也 是 8 ， 此 时 ， 高 度 的 起 始 位 置 
就 变 成 了 字符 内 容 区 域 的 垂直 中 心 位 置 ， 于 是 文字 就 有 一 半 落 在 框 的 外 
面 了 。 由 于 文字 字符 上 移 了 ， 自 然 基 线 位 置 (字母 x 的 底 边 缘 ) 也 往 上 
移动 了 ， 于 是 两 个 框 的 垂直 落差 就 更 大 了 。 














明白 了 这 个 简单 例子 ， 也 就 能 明白 上 面 的 两 端 对 齐 的 复杂 例子 。 紧 
接着 上 面 的 复杂 例子 ， 如 果 我 们 在 最 后 一 个 占 位 的 <i> 元 素 后 面 新 增 同 
样 的 x-baseline 字符 ， 则 结果 如 图 5-34 所 示 。 


图 5-34 1line-height:6 同时 添加 x-baseline 字符 后 的 效果 图 





这 样 大 家 是 不 是 就 可 以 明白 为 何 <i> 元 素 上 面 还 有 一 点 间 院 了? 





居然 还 有 人 皱眉 头 ? 那 我 再 用 文字 解释 下 : 现在 行 高 line-height 
是 8 ， 则 字符 x-baseline 行 间 距 就 是 -lem ， 也 就 是 高 度 为 6 ， 由 于 
CSS 世 界 中 的 行 间距 是 上 下 等 分 的 ， 因 此 ， 此 时 字符 x-baseline 的 对 
齐 点 就 是 当前 内 容 区 域 ( 可 以 看 成 文字 选中 背景 区 域 ， 如 图 5-35 所 示 ， 
截 自 Firefox 浏 览 占 〉 的 垂直 中 心 位 置 。 由 于 图 5-34 中 的 x-baseline 使 
用 的 是 微软 雅 黑 字体 ， 字 形 下 沉 明显 ， 因 此 ， 内 容 区 域 的 垂直 中 心 位置 
大 约 在 字符 x 的 上 面 1/4 处 ， 而 这 个 位 置 就 是 字符 x-baseline 和 最 后 一 
行 图 片 下 边缘 交汇 的 地 方 。 














理解 了 x-baseline 的 垂直 位 置 表现 ， 间 隐 问 题 承 很 好 理解 了 。 由 
于 前 面 的 <i class= "justify-fix"></i> 是 一 个 ijnline-block 的 
空 元 素 ， 因 此 基线 就 是 自身 的 底部 ， 于 是 下 移 了 差不多 3/4 个 x 的 高 度 ， 
这 个 下 移 的 高 度 就 是 上 面 产生 的 间 隐 高 度 。 








好 了 ， 一 旦 知道 了 现象 的 本 质 ， 我 们 就 能 轻松 对 症 下 药 了 ! 要 么 改 
变 占 位 <i> 元 素 的 基线 ， 要 么 改造 “幽灵 空白 节点 ”的 基线 位 置 ， 要 么 使 
用 其 他 vertical-align 对 齐 方式 。 





首先 来 个 最 有 意思 的 方法 ， 即 改变 占 位 <i> 元 素 的 基线 。 这 个 很 简 
单 ， 只 要 在 空 的 <i> 元 素 里 面 随便 放 几 个 字符 就 可 以 了 。 例 如 ， 塞 一 人 
空格 &nbsp : 

.box { 


text-align: Justify 
line-height: ©; 


} 

<div class="box"> 
<img src="1.jpg" width="96"> 
<img src="1.jpg" width="96"> 


<img src="1.jpg" width="96"> 

<img src="1.jpg" width="96"> 

<i class="justify-fix">&nbsp;</i> 

<i class="justify-fix">&nbsp;</i> 

<i class="justify-fix">&nbsp;</i> 
</div> 








这 时 会 发 现 间 隐 没有 了 1! 为 什么 呢 ? 因 为 此 时 <i> 元 素 的 基线 是 里 
面 字 符 的 基线 ， 此 基线 也 正好 和 外 和 面 的 “ 山 灵 空白 市 反 ” 的 基线 位 置 一 
致 ， 没 有 了 错位 ， 目 然 束 不 会 有 间 隐 啦 ! 效果 如 图 5-36 所 示 。 






商 成 contert area 


一 一 一 一 一 一 一 一 一 


图 5-35 x-baseline 字符 content area 示意 





图 5-36 ”字符 去 除 间 隙 


改造 “幽灵 空白 节点 ”的 基线 位 置 可 以 使 用 font-size ， 当 字体 足够 
小 时 ， 基 线 和 中 线 会 重合 在 一 起 。 什 么 时 候 字体 足够 小 昵 ? 就 是 6 。 于 
是 ， 如 下 CSS 代 码 (line-height 如 果 是 相对 font-size 的 属性 
值 ，line-height:6 也 可 以 省 掉 ) : 


.box { 
text-align: justify 


font-size: 90; 


} 





效果 如 图 5-37 所 示 。 





图 5-37 font-size:6 去 除 间 际 


看 上 去 好 像 效 果 类 似 ， 都 是 没有 间隙， 但 是 font-size:8 下 的 各 
类 对 齐 效 果 部 更 彻 抵 。 





使 用 其 他 vertical-align 对 齐 方式 就 是 让 <i> 占 位 元 
素 vertical-align:top/bottom 之 类 ， 当 前 ， 前 提 还 是 先 让 容 
器 Line-height:6 ， 例 如 : 








.box { 
text-align: Justify 
line-height: 6; 


.justify-fix { 
vertical-align: bottom; /* top、 middle 都 可 以 */ 


} 








关于 此 复杂 案例 有 对 应 的 原型 示意 ， 手 动 输入 
http://demo.cssworld.cn/ 5/3-6.php 或 者 扫 右 侧 的 三 维 码 。 





准确 了 解 inline-block 与 baseline 之 间 多 变 的 关系 ， 除 了 便于 
理解 一 些 令 人 抓 狂 的 现象 外 ， 还 可 以 专门 利用 其 来 简化 我 们 的 开发 ， 比 
方 说 一 直 很 头疼 的 背景 小 图 标 和 文字 对 齐 的 问题 。 我 这 里 再 给 大 家 介绍 
一 个 vertical-align 负 值 以 外 的 其 他 处 理 技巧 。 








例如 ， 要 删除 一 个 小 图 标 ， 通 常 的 做 法 无 非 是 下 面 两 种 : 


<i class="icon-delete"></i> 删除 


或 者 直接 一 个 按钮 图 标 ， 里 面包 含 文本 内 容 ， 保 证 可 访问 性 : 


<i class="icon-delete"> 删 除 </i> 





而 以 上 两 种 实现 基本 上 图 标 元 素 的 基线 都 是 元 素 的 下 边缘 ， 之 前 讲 
过 inline-block 元 素 的 基线 规则 : 一 个 inline-block 元 素 ， 如 有 果 里 
面 没 有 内 联 元 素 ， 或 者 overflow 不 是 visible ， 则 该 元 素 的 基线 就 是 
其 margin 底 边 缘 。 








上 面 的 第 一 种 做 法 中 ，<i class="icon-delete"></i> 是 一 个 空 
标签 ， 里 面 无 内 联 元 素 ， 因 此 ， 基 线 是 底 边 缘 ; 而 第 二 种 做 法 中 ， 虽 然 
里 面 有 文字 ， 但 是 此 文字 是 不 显示 的 ， 因 此 开发 者 习惯 设 
置 overflow:hidden ， 这 又 导致 基线 是 底 边 缘 。 而 正 是 由 于 基线 是 元 
素 底 边缘 ， 才 导致 图 标 和 文字 默认 严重 不 对 齐 ! 但 是 ， 我 们 不 妨 反 过 来 
试想 下 ， 如 果 图 标 和 后 面 的 文字 高 度 一 致 ， 同 时 图 标的 基线 和 文字 基线 
一 样 ， 那 包 不 是 图 标 和 文字 天 然 对 齐 ， 根 本 就 不 需要 margin 
或 vertical-align 的 垂直 偏 移 了 ? 














完全 可 行 ， 这 里 分 盏 一 下 我 总 结 的 一 套 基 于 26px 图 标 对 齐 的 处 理 
技巧 ， 该 技巧 有 下 面 3 个 要 后 。 











(1) 图 标高 度 和 当前 行 高 都 是 29px 。 很 多 小 图 标 背 景 合 并 工具 都 
是 图 标 蜗 蜗 多 大 生成 的 CSS 宽 高 就 是 多 大 ， 这 其 实 并 不 利于 形成 可 以 整 
站 通用 的 CSS 策 上 略 ， 我 的 建议 是 图 标 原 图 先 扩展 成 统一 规格 ， 比 方 说 这 
里 的 26pxx26px ， 然 后 再 进行 合并 ， 可 以 市 约 大 量 CSS 以 及 对 每 个 图 标 
对 齐 进行 不 同 处 理 的 开发 成 本 。 











(2) 图标 标 签 里 面 永远 有 字符 。 这 个 可 以 借助 :before 或 :after 
伪 元 素 生成 一 个 空格 字符 轻松 搞定 。 


(3) 图 标 CSS 不 使 用 overflow:hidden 保证 基线 为 里 面 字 符 的 基 


线 ， 但 是 要 让 里 面 潜在 的 字符 不 可 见 。 
于 是 ， 最 终 形成 的 最 佳 图 标 实践 CSS 如 下 : 


.Icon { 
display: inline-block; 
width: 26px; height: 28px; 
background: url(sprite.png) no-repeat; 
white-space: nowrap; 
letter-spacing: -1lem; 
text-indent: -999em; 
} 
.icon:before { 
content: '\368060'; 




















} 
/* 其 体 图 标 */ 
.ijcon-xxx { 
background-position: 6 -26pX; 
} 








现在 ， 我 们 套用 这 里 的 28px 处 理 的 策略 ， 看 看 上 面 两 种 删除 小 图 
标 处 理 的 对 齐 效果 如 何 ， 手 动 输入 http:/demo.cssworld.cn/5/3-7.php 或 者 
扫 下 面 的 二 维 码 。 对 齐 效果 如 图 5-38 所 示 “〈 手 机 截屏 剪辑 ) 。 





1. 空 标签 后 面 跟随 文本 3. 字号 变 大 
疝 删除 侧 删除 


2. 标签 里 面 有 "删除 "文本 向 随便 什么 文字 
疝 随便 什么 文字 





图 5-38 ”基于 内 联 基 线 的 小 图 标 对 齐 效果 截图 





可 以 看 到 ， 小 图 标 和 文字 对 齐 完全 不 受 font-size 大 小 的 影响 。 可 
以 说 ， 整 个 网 站 所 有 小 图 标的 对 齐 问题 都 可 以 解决 了 ， 节 省 了 大 量 CSS 
代码 ， 降 低 了 大 量 开 友和 维护 成 本 ， 是 个 好 处 非常 明显 的 处 理 技 巧 。 





最 后 有 必要 说 明 一 下 ， 这 里 28px 只 是 一 种 经 验 取 值 ， 因 为 目前 的 
常见 站 反 的 字号 和 行 间 距 比 较 合乎 这 个 大 小 。 如 果 你 的 项 目 设计 很 大 
气 ， 字 号 默认 都 是 16px ， 那 么 图 标 规格 和 默认 行 号 可 能 24px 会 更 合适 
一 点 , 


2. 了 解 vertial-align:top/bottom 


vertial-align:top 和 vertial-align:bottom 基本 表现 类 似 ， 
只 是 一 个 “上 一 个 “下 ”， 因 此 合 在 一 起 讲 。 





顾名思义 ，vertial-align:top 就 是 垂直 上 边缘 对 齐 ， 有 具体 定义 
着 下 





。 内 联 元 素 : 元 素 底 部 和 当前 行 框 盒子 的 顶部 对 齐 。 
。 table-cell 元 素 : 元 素 底 padding 边缘 和 表格 行 的 顶部 对 齐 。 





用 更 通俗 的 话 解 释 就 是 : 如 果 是 内 联 元 素 ， 则 和 这 一 行 位 置 最 高 的 
内 联 元 素 的 顶部 对 齐 ; 如 果 display 计算 值 是 table-cell 的 元 素 ， 我 


们 不 妨 脑 补 成 <td> 元 素 ， 则 和 <tr> 元 素 上 边缘 对 齐 。 
vertial-align:bottom 声明 与 此 类 似 ， 只 是 把 “顶部 ” 换 成 “ 底 
部 ”， 把 “上 边缘 ” 换 成 “下 边缘 ”。 
需要 注意 的 是 ， 内 联 元 素 的 上 下 边缘 对 齐 的 这 个 “边缘 ”是 当前 “ 行 
框 盒子 ”的 上 下 边缘 ， 并 不 是 块 状 容 器 的 上 下 边缘 。 


vertial-align 属性 中 的 top 和 bottom 值 可 以 说 是 最 容易 理解 的 
vertial-align 属性 值 了 ， 并 且 表 现 相 当 稳 定 ， 不 会 出 现 难以 理解 的 
现象 ， 在 实际 开发 的 时 候 也 相当 常用 。 





末了 ， 出 个 小 题 测试 下 大 家 : 己 知 一 个 <div> 元 素 中 有 两 张 图 片 ， 
其 中 后 面 一 张 图 片 设置 了 vertial-align:bottom ， 请 问 这 两 张 图 片 
的 底 边缘 是 对 齐 的 吗 ? 





答案 : 不 是 不 对 齐 的 。 因 为 图 片 所 在 行 框 盒 子 的 最 低 点 是 “幽灵 空 
日 市 扩 ”的 奔 部 ， 所 以 最 后 的 表现 会 如 图 5-39 所 示 。 











图 5-39 ”两 张 图 片 底部 不 对 齐 


3. vertial-align:middle 与 近似 垂直 居中 


在 5.2 节 已 提 到 ，1ine-height 和 vertial-align: middle 实现 
的 多 行文 本 或 者 图 片 的 垂直 居中 全 部 都 是 “近似 垂直 居中 ”， 原 因 


与 vertial- align:middle 的 定义 有 关 。 





。 内 联 元 素 : 元 素 的 垂直 中 心 点 和 行 框 盒子 基线 往 上 1/2 x-height 


处 对 齐 。 
。 table-cell 元 素 : 单元 格 填充 盒子 相对 于 外 面 的 表格 行 拓 中 对 
齐 。 


table-cell 元 素 的 vertial-align:middle 中 规 中 矩 ， 没 什么 好 
说 的 ， 倒 是 内 联 元 素 的 vertial-align:middle 有 很 多 说 不 完 的 故 
事 。 定 义 中 “基线 往 上 12 x-height 处 ">， 指 的 就 是 middle 的 位 置 ， 仔 
细 品 味 一 下 , “基线 ?加 是 字符 Xx 底 边缘 ， 而 Xx-height 了 驶 是 字符 X 的 高 
度 。 考 虑 到 大 部 分 字体 的 字符 x 上 下 是 等 分 的 ， 因 此 ， 从 “基线 往 上 
1/2x-height 处 ”我 们 就 可 以 看 出 是 字符 x 中 心 交 文 点 的 位 置 。 换 句 话说 
就 是 ，vertial-align:middle 可 以 让 内 联 元 素 的 真正 意义 上 的 垂直 
中 心 位 置 和 字符 x 的 交叉 点 对 齐 。 

















基本 上 所 有 的 字体 中 ， 字 符 x 的 位 置 都 是 偏 下 一 点 儿 的 ，fontt- 
size 越 大 偏 移 越 明 显 ， 这 才 导 致 默认 状态 下 的 vertial- 
align:middle 实现 的 都 是 “近似 垂直 居中 ”。 





为 了 更 直观 地 表示 上 面 的 解释 ， 我 特意 做 了 个 演示 页 面 ， 手 动 输入 
http://demo.cssworld.cn/5/3- 8.php 或 者 扫 下 面 的 二 维 码 。 演 示 页 面 有 两 条 
水 平 线 ， 其 中 ， 图 片上 线 显 示 的 是 图 片 垂直 中 心 位 置 ， 而 贯穿 整个 容 髓 
的 线 就 是 容器 的 垂直 中 心 位 置 ， 可 以 看 到 ， 默 认 状 态 下 ， 两 根 线 残 不 在 
一 个 水 平 线 上 ， 如 图 5-40 所 示 。 














图 5-40 ”两 条 垂直 中 心 线 示意 





因为 图 片上 的 那 根 线 趋同 于 和 字符 X 的 中 心 靠 近 ， 而 不 是 容器 的 重 
直 中 心 。 如 果 我 们 把 font-size 改 大 ， 如 48px ， 则 效果 更 加 明显 ， 如 
图 5-41 所 示 。 





图 5-41 大 字号 下 两 条 垂直 中 心 线 距离 更 明显 











如 果 想 要 实现 真正 意义 上 的 垂直 居中 对 齐 ， 只 要 想 办 法 让 字符 x 的 
中 心 位 置 就 是 容器 的 垂直 中 心 位 置 即 可 ， 通 常 的 做 法 是 设置 font- 


size:6 ， 整 个 字符 X 缩 小 成 了 一 个 看 不 见 的 点 ， 根 据 Line-height 的 
半 行 间距 上 下 等 分 规则 ， 这 个 点 就 正好 是 整个 容器 的 垂直 中 心 位 置 ， 这 
样 就 可 以 实现 真正 意义 上 的 算 直 居中 对 齐 了 。 


不 过 话 又 说 回来 ， 平 常 我 们 开发 的 时 候 ，font-size 可 能 就 12px 
或 14px ， 虽 然 最 终 的 效果 是 “近似 垂直 居中 ”， 但 偏差 也 就 1px~-2px 的 
样子 ， 普 通用 户 其 实 是 很 难 觉察 到 其 中 的 差异 的 ， 因 此 ， 是 否 非 要 真正 
意义 上 垂直 居中 ， 还 是 要 根据 项 目的 实现 情况 权衡 做 出 决策 。 








5.3.5 ”深入 理解 vertical-align 文本 类 属性 值 
文本 类 属性 值 指 的 就 是 text-top 和 text-bottom ， 定 义 如 下 。 


。 Vertical-align:text-top: 盒子 的 顶部 和 父 级 内 容 区 域 的 顶部 


对 齐 。 
。Vertical-align:text-bottom: 盒子 的 底部 和 父 级 内 容 区 域 的 
底部 对 齐 。 


其 中 ， 理 解 的 难点 在 于 “ 父 级 内 容 区 域 ”， 这 是 个 什么 东西 呢 ? 


内 容 区 域 从 3.4.2 节 开始 就 有 多 次 提 及 ， 在 本 书 中 ， 其 可 以 看 成 是 
Firefox/ 正 浏览 器 文本 选中 的 背景 区 域 ， 或 者 默认 状态 下 的 内 联 文本 的 背 
景色 区 域 。 而 所 谓 “ 父 级 内 容 区 域 " 指 的 就 是 在 父 级 元 素 当 前 font-size 
和 font-family 下 应 有 的 内 容 区 域 大 小 。 


因此 ， 这 个 定义 又 可 以 理解 为 (以 text-top 举例 ) : 假设 元 素 后 
面 有 一 个 和 父 元 素 font- size 、font-family 一 模 一 样 的 文字 内 容 ， 
则 vertical-align:text-top 表示 元 素 和 这 个 文字 的 内 容 区 域 的 上 边 


缘 对 齐 。 





我 特意 制作 了 一 个 很 直观 的 演示 页 面 来 示意 text-top 和 text- 
bottom 属性 值 的 样式 表现 ， 手 动 输入 http://demo.cssworld.cn/5/3-9.php 
或 者 扫 右 侧 的 二 维 码 。 此 演示 页 面 有 3 个 不 同 font-size ， 分 别 是 16px 
、24px 和 32px 。 父 元 素 默 认 是 16px ， 我 们 可 以 清晰 地 看 到 图 片 的 上 
边缘 和 16px 文字 的 内 容 区 域 的 上 边缘 对 齐 了 ， 如 图 5-42 所 示 。 点 击 其 
他 单 选 按钮 ， 改 变 父 级 元 素 的 font-size 大 小 ， 如 24px ， 就 会 看 到 图 
片上 边缘 〈 对 齐 线 ) 和 24px 字号 大 小 的 文字 的 内 容 区 域 的 上 边缘 对 齐 
了 ， 如 图 5-43 所 示 。 











有 于 父 级 font-size 大 小 : 


®@) 1]6PX 24px 32pX 


1. vertical-ahgn:text-top 





图 5-42 ”图 片上 边缘 和 16px 文字 的 内 容 区 域 的 上 边缘 对 齐 


设置 父 级 font-size 大 小 : 
16px  (®) 24px 32Ppx 


1. vertical-align:text- 





图 5-43 ”图 片上 边缘 和 24px 文字 的 内 容 区 域 的 上 边缘 对 齐 


好 了 ， 现 在 我 们 深入 理解 了 文本 类 属性 值 的 表现 规则 ， 这 对 我 们 实 
际 开发 有 什么 用 呢 ? 我 这 里 郑重 地 告诉 大 家 : 没有 任何 作用 。 准 确 地 
讲 ， 应 该 是 其 和 其 他 垂直 定位 属性 相 比 没有 任何 的 优势 ， 尽 管理 论 上 讲 
其 特点 明确 ， 并 且 具 有 以 下 几 个 明显 的 优势 。 











首先 ， 文 本 类 属性 值 的 垂直 对 齐 与 左右 文字 大 小 和 高 度 都 没有 关 
系 ， 而 所 有 线性 类 属性 值 的 定位 都 会 受到 兄弟 内 联 元 系 的 影响 。 


其 次 ， 文 本 类 属性 值 的 垂直 对 齐 可 以 像素 级 精确 控制 。 通 常 而 言 ， 
无 论 是 图 文 对 齐 还 是 文字 和 文字 对 齐 ， 文 字 大 小 或 图 片 的 高 度 都 是 固定 
的 ， 不 可 能 说 为 了 对 齐 效果 ， 把 设计 师 设计 好 的 16px 文字 改 成 14px ， 
因此 ， 线 性 类 属性 值 中 的 baseline 和 middle 实现 的 对 齐 我 们 是 无 法 精 
确 控 制 其 垂直 对 齐 位 置 的 ， 因 为 这 两 个 值 的 对 齐 是 和 字符 走 的 。 但 
是 ，text-top 和 text-bottom 则 无 此 问题 : 如果 是 图 文 对 齐 ， 我 们 可 
以 通过 改变 父 元 素 的 font- size 大 小 精确 控制 对 齐 位 置 ， 如 果 是 文字 和 
文字 对 齐 ， 我 们 可 以 改变 文字 的 line-height ， 也 就 是 通过 改变 元 素 
的 高 度 〈 上 下 边缘 位 置 ) 精确 控制 对 齐 位 置 。 

















然而 ， 命 运 就 是 如 此 不 公 ， 有 些 CSS 属 性 设计 的 初衷 可 能 很 简单 ， 
Rt 有 些 属性 值 理论 应 该 有 大 成 ， 实 际 却 无 人 问 
津 。vertical-align 的 文本 类 属性 值 束 是 代表 之 一 。 它 为 什么 会 有 这 
样 糟 糕 的 际遇 呢 ? 











我 认为 原因 很 多 ， 有 具体 有 以 下 几 个 。 





(1) 使 用 场景 缺乏 。 当 前 CSS 重 构 以 精致 布局 为 主流 , “对 齐 文 
本 ”的 场景 相 比 旧时 代 要 少 4 最 





(2) 文本 类 垂直 对 齐 理解 成 本 高 。 我 发 现 这 样 一 个 现象 ， 当 需要 
调整 内 联 元 素 垂 直 位 置 的 时 候 ， 有 人 往往 会 使 用 非 设 计 本 意 的 margin 
定位 甚至 relative 定位 去 纠正 不 对 齐 的 问题 ， 或 者 更 资深 一 点 儿 的 开 
发 人 员 会 配合 具体 场景 使 用 合适 的 vertical-align 数值 进行 定位 。 为 
什么 呢 ? 因为 后 面 这 3 种 垂直 定位 策略 显然 要 比 text-top 和 text- 
bottom 属性 值 容 易 理解 得 多 ， 人 简单 才 是 王道 














(3) 内 容 区 域 不 直观 且 易 变 。 如 今 实际 对 外 的 项 目 布 局 都 讲求 精 
确 布 局 、 像 素 级 还 原 。 而 内 容 区 域 默认 是 看 不 见 的 ， 需 要 根据 经 验 或 
者 其 他 手段 才能 呈现 ， 这 么 抹 烦 的 事情 显然 是 会 影响 开发 效率 的 ; 然后 
最 大 的 问题 还 在 于 “ 易 变 ”"， 内 容 区 域 的 大 小 是 和 字体 font-family 密 
切 相 关 的 ， 要 知道 ， 不 同 的 系统 、 不 同 的 平台 使 用 的 字体 往往 都 是 不 一 
样 的 ， 比 方 说 ，Windows 系 统 下 使 用 “微软 雅 黑 ”字体 ， 那 能 保证 OS X 系 
统 或 者 手机 系统 还 有 “微软 雅 黑 ” 字 体 吗 ? 一 旦 字体 不 一 样 ， 内 容 区 域 大 
小 就 会 不 一 样 ， 导 致 的 就 是 不 同 设备 下 对 齐 的 位 置 是 不 一 样 的 ， 也 就 是 
我 们 所 说 的 “不 兼容 2?”。 如 果 对 视觉 要 求 较 高 ， 这 显然 就 是 一 个 比较 严重 




















的 问题 了 。 





于 是 ， 这 一 系列 的 原因 导致 文本 类 属性 值 虽然 理论 上 强大 ， 但 实际 
实用 价值 却 有 限 ， 至 少 我 没 发 现 什 么 场景 下 其 具有 明显 的 使 用 优势 。 


5.3.6 ”简单 了 解 vertical-align 上 标 下 标 类 属性 值 


vertical-align 上 标 下 标 类 属性 值 指 的 就 是 sub 和 super 两 个 
值 ， 分 别 表示 下 标 和 上 标 。 在 HTML 代 码 中 ， 有 两 个 标签 语义 就 是 下 标 
和 上 标 ， 分 别 是 上 标 <sup> 和 下 标 <sub> ， 因 为 这 两 个 HTML 标 签 长 得 
很 类 似 ， 所 以 很 多 人 经 常 记 不 清 到 底 哪个 是 上 标 哪个 是 下 标 。 我 告诉 大 
家 一 个 记忆 方法 ， 就 是 看 p 和 b 两 个 字母 的 圈 圈 位 置 ， 如 果 圈 圈 在 上 面 ， 
就 是 “上 标 ?”， 如 有 果 圈 圈 在 下 面 ， 就 是 “下 标 ”。 


实际 上 ， 这 两 个 HTML 标签 不 仅 语 义 上 和 sub 和 super 类 似 ， 长 相 
上 也 很 像 ， 只 是 我 一 直 没 想 明 白 : 为 什么 CSS 的 vertical-align 属性 
的 下 标 是 sub， 和 HTML 标 签 csup> 一 样 ， 而 上 标 super 却 多 了 个 er ， 
和 HTML 标 签 <csub> 不 一 样 了 呢 ? 


最 后 ，HTML 标 签 <csup> 和 <sup> 的 vertical-align 属性 也 和 
super 和 sub 有 着 非 同 一 般 的 关系 ， 那 就 是 <sup> 标签 默认 的 
vertical-align 属性 值 就 是 super ，<sub> 标签 默认 的 vertical- 
align 属性 值 就 是 sub 。 上 标 常 用 作 标 注 ， 如 图 5-44 所 示 。 


对 应 HTML 如 下 : 


zhangxinxu<sup>[1]</sup> 





下 标 在 数学 公式 、 化 学 表达 式 中 用 得 比较 多 ， 如 图 5-45 所 示 。 对 应 
HTML 如 下 : 


NH<sub>4</sub>HCO<sub>3</sub> 


zhangxinxu[ 


图 5-44 ”上 标 效 果 示 意 


NHaHCO; 


图 5-45 下 标 效 果 示 意 
基本 上 ，vertical-align 上 标 下 标 类 属性 值 的 实际 应 用 价值 也 就 
于 面 这 点 儿 了 ， ee 。 看 看 这 两 个 属 
性 值 的 定义 ， 就 知道 我 为 什么 这 么 说 了 。 


。 vertical-align:super: 提高 盒子 的 基线 到 父 级 合适 的 上 标 基 
线 位 置 。 

。 vertical-align:sub: 降低 盒子 的 基线 到 父 级 合适 的 下 标 基 线 位 
置 。 


没 想到 规范 中 也 会 出 现 “ 合 适 ” 这 样 横 棱 两 可 的 名 词 ， 这 就 让 人 很 范 
然 了 。 所 以 ， 想 利用 此 属性 精确 定位 和 布局 显得 困难 重重 ， 只 能 用 来 实 
现 对 垂直 位 置 要 求 不 高 的 上 标 下 标 效 果 。 














然后 ， 有 一 点 需要 注意 ，vertical-align 上 标 下 标 类 属性 值 并 不 
会 改变 当前 元 素 的 文字 大 小 ， 干 万 不 要 被 HTML 标 签 中 的 <sup> 和 





<sub> 误导 ， 因 为 这 两 个 HTML 标 签 默认 font-size 是 smaller ， 如 图 
5-46 中 所 示 的 Chrome 浏 览 器 内 置 CSS 设 置 。 


sub { user agent stylesheet 
vertical-align: sub; 
font-size: smaller; 


} 


图 5-46 ”Chrome 浏 览 器 <sub> 内 置 CSS 声 明 截 图 





5.3.7 无 处 不 在 的 vertical-align 








本 节 算 是 对 之 前 内 容 的 一 个 必要 的 总 结 。 对 于 内 联 元 素 ， 如 果 大 家 
遇 到 不 太 好 理解 的 现象 ， 请 一 定 要 意识 到 ， 有 个 “ 约 灵 空白 节点 ”以 及 无 
处 不 在 的 vertical-align 属性 。 








虽然 同属 线性 类 属性 值 ， 但 是 top/bottom 和 baseline/middle 
却 是 完全 不 同 的 两 个 帮派 ， 前 者 对 齐 看 边缘 看 行 框 例子， 而 后 者 是 和 字 
符 x 打 交道 。 因 此 ， 细 细 考 究 ， 两 者 的 行为 表现 实则 大 相 径 码 ， 一 定 要 


注意 区 分 。 





vertical-align 属性 值 的 理解 可 以 说 是 CSS 世 界 中 的 最 难点 。 首 
先 ， 需 要 深入 了 解 内 联 盒 模型 ， 其次， 不 同属 性 值 定义 完全 不 同 ， 且 很 
多 属性 table-cell 元 素 有 着 不 同 的 定义 ; 同时 最 终 表现 与 字符 x 、 
line-height， 和 font-size 、font-family 属性 密切 相关 ， 如 果 要 
通 透 ， 需 要 对 这 些 属 性 都 有 比较 深入 的 了 解 ， 因 此 ， 本 重 的 内 容 是 值得 
反复 研读 的 。 











本 章 目 前 给 出 的 所 有 示例 都 是 展示 单 属性 值 和 默认 值 baseline 如 
何 作用 的 ， 但 是 实际 开发 的 时 候 ， 经 常会 出 现 前 后 两 个 内 联 元 素 同时 设 


置 baseline 以 外 属性 值 的 情况 ， 有 些 人 可 能 会 手足 无 措 ， 毕 竟 单 个 属 
性 值 的 理解 就 够 哈 ， 多 个 属性 一 起 岂 不 脑子 都 转 不 过 来 ? 实际 上 ， 根 据 
我 的 反复 测试 和 确认 ，vertical-align 各 类 属性 值 不 存在 相互 冲突 的 
情况 ， 虽 然 某 个 vertical-align 属性 值 确实 会 影响 其 他 元 素 的 表现 ， 

但 是 这 种 作用 并 不 是 直接 的 。 所 以 ， 在 分 析 复 杂 场 景 的 时 候 ， 仪 需要 套 
用 定义 分 析 当 前 vertical-align 值 的 作用 就 可 以 了 。 


5.3.8 ”基于 vertical-align 属性 的 水 平 垂 直 居 中 弹 框 


最 后 ， 推 荐 一 个 我 目 己 觉得 非常 棒 的 vertical-align 属性 实践 ， 
就 是 使 用 纯 CSS 实 现 大 小 不 固定 的 弹 框 永远 居中 的 效果 ， 并 且 如 果 伪 元 
素 换 成 普通 元 素 ， 连 IE7 浏 览 器 都 可 以 兼容 。 





其 HTML 结 构 很 简单 ， 一 个 container ， 显 示 半 透明 背景 ， 然 后 里 
面 的 子 元 素 就 是 弹 杠 主体， 假设 类 名 是 .dialog ， 则 HTML 如 下 : 





<div class="container"> 
<div class="dialog"></dialog> 


</div> 





核心 CSS 代 码 如 下 : 





.Container { 
position: fixed; 
top: 8; right: 6; bottom: 6; left: ©; 
background-color: rgba(6,6,6,， .5); 
text-align: center; 
font-size: 0; 
white-space: nowrap 
overflow: auto 
} 
.Container:after { 
content: "" 


display: inline-block; 
height: 166%; 
vertical-align: middle; 
} 
.dialog { 
display: inline-block; 
vertical-align: middle; 
text-align: left; 
font-size: 14px; 
white-space: normal; 


} 








此 时 ， 无 论 浏览 器 尺寸 是 多 大 ， 也 无 论 弹 框 尺寸 是 多 少 ， 我 们 的 弹 
框 永远 都 是 居中 的 。 眼 见 为 实 ， 手 动 输入 http://demo.cssworld.cn/5/3- 
10.php 或 者 扫 右 侧 的 二 维 码 。 








目前 主流 实现 ， 尤 其 传统 PC 端 页 面 ， 几 乎 都 是 根据 浏览 右 的 尺寸 
和 弹 框 大 小 使 用 JavaScript 精 确 计算 弹 框 的 位 置 。 相 比 传统 的 JavaScript 
定位 ， 这 里 的 方法 优点 非常 明显 。 





(1) 节省 了 很 多 无 谓 的 定位 的 JavaScript 代 码 ， 也 不 需要 浏览 
器 resize 事件 之 类 的 处 理 ， 当 弹 框 内 容 动 态 变 化 的 时 候 ， 也 无 须 重 新 





定位 。 





(2) 性 能 更 改 、 泻 染 速度 更 快 ， 毕 葛 浏 览 右 内 置 CSS 的 即时 泻 染 
显然 比 JavaScript 的 处 理 要 更 好 。 


(3) 可 以 非常 灵活 控制 垂直 居中 的 比例 ， 比 方 说 设置 : 


.Container:after { 
height: 962%; 


} 





则 弹 框 不 是 垂直 居中 对 齐 ， 而 是 近似 上 下 2:3 这 种 感觉 的 对 齐 ， 反 而 会 
让 人 有 视觉 上 居中 的 感觉 


(4) 容器 设置 overflow:auto 可 以 实现 弹 框 高 度 超过 一 屏 时 依然 
能 看 见 屏幕 外 的 内 容 ， 传 统 实现 方法 则 比较 尴 作 。 


然后 ， 这 里 的 技巧 还 有 一 个 关键 点 是 半 透 明 黑 色 蒙 层 和 弹 框 元 素 是 
在 一 起 的 父子 关系 。 所 以 ， 上 面 的 示例 代码 中 ， 半 透明 黑色 蒙 层 效 果 借 
助 rgba 半 透 明 背 景色 实现 ， 对 于 不 文 持 rgba 的 正 8 浏览 器 ， 我 建议 制 
作 一 个 例如 10 像 素 x10 像 素 的 同等 效 末 的 半 透 明 PNG 图 片 ， 然 后 作为 
base64 URL 地 址 直接 使 用 ， 可 参考 上 面 的 演示 3-10， 或 者 也 可 以 使 用 正 
的 渐变 滤 镜 实现 。 





此 方法 实现 的 原理 关键 就 是 两 个 vertical-align:middle ， 前 
面 “ 图 片 近 似 垂直 居中 ”那里 只 网 请 一 个 元 素 vertical-align:middle 
就 实现 了 垂直 居中 ， 原 因 就 是 line-height 大 小 设置 得 恰到好处 ， 但 
是 对 于 弹 框 ， 高 度 不 确定 ， 显 然 不 能 使 用 某 个 具体 的 行 高 值 创建 丰 够 高 








的 内 联 元 素 。 于 是 ， 这 里 借助 伪 元 素 创 建 了 一 个 和 外 部 容器 一 样 高 的 宽 
上 度 为 6 的 ijnline- block 元 素 。 有 种 “幽灵 空白 节点 ”的 感觉 





下 面 是 原理 作用 的 关键 部 分 ， 在 5.3.7 节 讲 过 如 何 分 析 多 个 
vertical-align 的 作用， 根据 定义 专注 当前 元 素 即 可 。vertical- 
align:middle 定义 是 元 素 的 中 线 和 字符 x 中 心 点 对 齐 。 








(1) 在 本 例 中 ， 由 于 font-size 设置 为 6 ， 0 
.Container 的 上 边缘 ， 此 时 ， 高 度 166% 的 宽度 为 8 的 伪 元 素 和 这 
人 如 果 中 心 点 位 置 不 动 ， tm 
在 .container 的 外 面 ， 但 是 CSS 中 默认 是 左上 方 排列 对 齐 的 ， 所 以 ， 
伪 元 素 和 这 个 原本 在 容器 上 边缘 的 x 中 心 点 一 起 往 下 移动 了 半 个 容器 高 

度 ， 也 就 是 此 时 x 中 心 点 就 在 容 需 的 垂直 中 心 线 上 。 








(2) 弹 框 元 素 .dialog 也 设置 了 vertical-align:middle 。 根 
据 定义 ， 弹 框 的 垂直 中 心 位 置 和 x 中 心 点 位 置 对 齐 ， 此 时 ，x 中 心 点 束 在 
容器 的 垂直 中 心 位 置 ， 于 是 .dialosg 元 素 就 和 容器 的 垂直 中 心 位 置 对 齐 
了 ， 从 而 实现 了 垂直 居中 效果 。 





(3) 水 平 居 中 就 text-align:center 实现 ， 非 常 好 理解 。 





按照 初衷 ， 块 级 元 素 负责 布局 ， 内 联 元 际 设 置 内 容 。 但 是 ， 这 里 的 
弹 框 居 中 却 是 把 块 级 元 素 内 联 化 ， 利 用 一 些 内 联 属性 实现 垂直 居中 效 
果 ， 这 也 是 不 得 已 而 为 之 ， 因 为 vertical-align 等 内 联 属性 确实 比 块 
级 属性 强悍 ， 也 正 因 为 CSS 世 界 在 布局 上 的 弱势 ， 后 来 多 栏 布局 、 弹 性 
盒子 布局 以 及 栅 格 布局 一 个 一 个 都 出 来 补 强 了 。 


第 6 草 ” 流 的 破坏 与 保护 


CSS 世 界 中 正常 的 流 内 容 或 者 流 布局 虽然 也 足够 强大 ， 但 是 实现 的 
总 是 方 方 正 正 、 规 规矩 矩 的 效果 ， 有 时 候 我 们 希望 有 一 些 特殊 的 布局 表 
现 ， 例 如 ， 文 字 环 绕 效 果 ， 或 者 元 素 固 定 在 茶 个 位 置 ， 要 实现 这 样 的 效 
果 ， 正 常 的 流 就 有 些 捉襟见肘 。 因 此 ，CSS 中 有 一 类 属性 ， 专 门 通过 破 
坏 正常 的 “ 流 ” 来 实现 一 些 特殊 的 样式 表现 。 当 然 ， 所 谓 生生 相 元 ， 既 然 
有 人 破坏 ， 束 有 保护 其 他 元 际 不 被 破坏 的 属性 ， 本 章 就 来 介绍 那些 “破坏 
流 ? 和 “保护 流 ” 的 CSS 属 性 。 


6.1 麻 购 属性 float 


6.1.1 float 的 本 质 与 特性 


CSS 世 界 中 的 float 属性 是 一 个 年 代 非 常 久远 的 属性 。 说 这 人 句 话 是 
什么 意思 呢 ? 有 时 候 ， 要 了 解 某 一 事物 ， 最 好 先 弄 清楚 其 诞生 的 时 代 背 
景 。 对 于 新 手 CSS 开 发 人 人员， 无 其 条 面 喘 Web 产 品 开 发 人 员 ，float 属 
性 可 以 说 是 用 得 最 频繁 的 布局 属性 了 ， 所 以 他 们 很 可 能 会 对 float 属性 
有 误解 ， 认 为 float 属性 就 是 为 各 种 块 状 布局 而 设计 的 ， 实 际 上 不 是 
的 。 在 Web 诞 生 之 初 ， 带 宽 就 那么 一 点 点 ， 我 们 能 够 做 到 的 也 只 是 展示 
文字 以 及 零星 图 片 而 已 ， 怎 么 可 能 浮动 设计 的 目的 就 是 为 了 实现 各 种 砖 
头 式 的 复杂 布局 呢 ? 那个 年 代 复 杂 布 局 都 是 用 <table> 实现 的 。 既 然 这 
样 ， 那 float 属性 设计 的 目的 究竟 是 什么 呢 ? 














很 简单 ， 一 句 话 : 浮动 的 本 质 就 是 为 了 实现 文字 环绕 效果 。 而 这 
种 文字 环绕 ， 主 要 指 的 就 是 文字 环绕 图 片 显示 的 效果 。 前 文 多 次 提 到 ， 
CSS2 属 性 的 设计 都 是 为 图 文 展示 服务 的 ，float 也 是 如 此 。 所 以 ， 大 家 应 
该 也 多 少 对 为 什么 老 下 浏览 器 与 浮动 相关 的 bug 一 火车 都 装 不 下 有 些 了 
解 了 吧 ! 人 家 的 功能 本 来 就 很 单纯 ， 只 是 让 文字 可 以 绕 着 图 片 跑 ， 你 偏 
要 各 种 布局 ， 结 果 撑 不 住 了 吧 ! 








很 显然 ， 从 float 属性 的 设计 初 囊 来 看 ， 当 下 那些 漫天 飞舞 的 浮动 
属性 完全 就 是 滥用 了 。 








这 其 实 不 难 理解 。 当 你 手中 只 有 一 把 锤子 的 时 候 ， 你 往往 会 把 一 切 
问题 都 看 成 钉子 。 浮 动 属性 用 来 布局 非常 符合 现实 世界 的 认 知 ， 什 么 认 
知 呢 ? 就 是 搭 积木 或 者 说 驹 砖头 砌 墙 ， 反映 在 代码 实现 上 就 是 把 元 素 一 
个 一 个 定 宽 定 高 ， 通 过 浮动 一 个 一 个 堆积 起 来 ， 理 论 上 一 
个 float :1left 声明 几乎 就 可 以 把 整个 页 面 结构 都 弄 出 来 (如 图 6-1 所 
示 ) ， 而 且 内 联 元 素 的 间隙 问题 、margin 合并 问题 都 没有 ， 对 于 新 手 
而 言 ， 不 知道 多 开心 ! 易学 又 好 用 ， 比 “ 流 ” 这 种 玄 玄 乎 乎 的 东西 靠 谱 多 
由 
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float:left; float:left; 





图 6-1 全 浮动 属性 搭建 网 页 结构 


乍 一 看 ，float 好 像 也 能 满足 我 们 布局 页 面 的 需求 ， 但 是 实际 上 ， 
这 种 砌 砖头 式 的 布局 方式 就 像 妙 脆 角 ， 一 代 就 碎 ， 主 要 在 于 其 缺少 弹 
性 。 举 个 例子 ， 一 旦 某 个 列表 高 度 变 高 了 ， 则 下 面 的 列表 就 可 能 发 生 不 
愿 看 到 的 布局 错位 ， 抑 或 是 日 后 我 们 需要 增加 茶 个 元 素 的 宽度 ， 则 牵 一 
发 而 动 全 身 ， 其 他 元 素 也 必须 跟着 调整 ， 否 则 样式 必 乱 ， 也 就 是 说 布局 
的 容错 性 很 糟 料 。 








如 果 说 得 再 远 一 点 ， 这 其 实 是 典型 的 “ 刚 与 柔 ? 的 思想 博弈 。 网 页 布 
局 如 同 我 们 构建 高 楼 大 厦 ， 总 是 需要 应 付 各 种 突 发 状况 ， 所 以 ， 好 的 网 
页 应 该 如 同好 的 建筑 。 传 统 的 楼 房 是 典型 的 “ 刚 ? 式 结构 ， 砖 头 加 楼 板 ， 
问题 不 言 而 喻 ， 一 个 小 小 的 地 震 可 能 就 被 夷 为 平地 ， 而 好 的 楼 房 应 该 是 
有 “ 柔 * 在 其 中 ， 也 就 是 高 质量 的 钢筋 结构 ， 当 地 展 导 致 房屋 摇晃 的 时 
候 ， 可 以 通过 钢筋 的 “柔性 ” 凶 力 而 保障 整体 结构 的 稳固 。 台 风 歼 来 ， 很 
少见 到 说 柔弱 的 柳树 被 吹 倒 ， 反 而 会 经 闻 看 到 坚固 的 电线 杆 被 风 吹 倒 的 
消息 ， 道 理 其 实 也 类 似 。 








说 这 么 多 束 是 要 告诉 大 家 : 浮动 是 魔鬼 ， 少 砌 砖头 、 少 浮动 ， 要 更 
多 地 去 挖掘 CSS 世 界 本 号 的 “流动 性 ?和 * 目 适应 性 "， 以 构建 能 够 适用 于 
各 种 环境 的 高 质量 的 网 页 布局 。 





我 们 在 移动 端 开 发 的 时 候 ， 不 可 避免 要 面 对 各 种 设备 尺寸 的 问题 ， 
加 上 横竖 屏 切换 ， 其 可 变 的 外 部 环境 非常 之 多 ， 尤 其 在 初期 ， 很 多 人 有 
这 样 的 想法 : 固定 宽度 320 像 素 ， 然 后 左右 留 白 ;抑或 是 320 像 系 布 
局 ， 然 后 根据 比例 缩放 整个 页 面 以 100% 填 满 屏幕 宽度 。 这 些 想 法 最 大 
的 问题 在 于 思维 方式 还 是 “ 刚 ? 式 思维 。 记 住 ，CSS 设 计 的 初衷 就 是 表现 
如 水 流 ， 富 有 弹性 , “砖头 式 思维 ”是 道道 而 行 ， 是 绝 不 可 取 的 。 








如 果 进 一 步 深 究 ,“ 刚 ? 式 思维 的 主要 原因 还 在 于 开发 人 员 对 CSS 的 
了 解 不 够 深入 ， 没 有 能 够 了 解 到 其 表层 属性 之 下 更 深入 的 流动 性 和 自 适 
应 性 。 这 其 实 是 一 个 很 大 的 问题 ， 因 为 虽然 前 端 从 业 人 员 众 多 ， 但 是 仍 
有 很 大 一 部 分 人 不 会 得 到 这 些 深 入 的 知识 和 技能 ， 也 就 很 难 跳出 这 些 固 
定 布局 的 思维 方式 。 好 在 CSS 的 设计 总 是 因 需 求 而 生 ，CSS2 的 设计 是 面 
问 图 文 展 示 ，CSS3 的 设计 则 是 为 了 更 绚丽 的 视觉 效 末 和 更 丰富 的 网 页 
布局 ， 所 以 ，CSS3 出 现 了 类 似 flex 弹性 盒子 布局 这 种 更 表层 、 更 上 
层 、 更 浅显 、 更 直 白 的 CSS 属 性 ， 以 另外 一 种 更 加 简单 的 方式 让 大 家 不 
得 不 以 自 适应 的 方式 去 实现 布局 。 











在 第 3 章 介 绍 width 属性 时 曾 提 到 过 我 忠 结 的 一 套 “ 黎 三 无 准则 ”， 
即 “ 无 宽度 ， 无 图 片 ， 无 译 动 ”! 之 所 以 要 “无 浮动 "， 一 个 原因 古 纯 浮动 
布局 容错 性 差 ， 容 易 出 现 比较 严重 的 布局 问题 ， 还 有 一 个 原因 区 
是 float 本 身 就 是 魔 风 属性， 容易 出 现 意 料 之 外 的 情况 ， 这 里 的 意料 之 
外 除了 float 属性 自 映 特性 (如 父 元 系 高 度 塌陷 ) 导致 的 布局 问题 外 ， 








还 包括 诸多 兼容 性 问题 。 千 万 不 要 以 为 只 要 不 用 管 下 6 和 下 7 浏览 器 就 可 
以 高 枕 无 忧 了 ， 实 际 上 ， 当 下 float 属性 还 是 存在 一 些 兼 容 性 问题 的 
《6.5 节 中 会 有 演示 ) 。 


如 果 更 进一步 深入 分 析 我 们 就 会 发 现 ，float 属性 的 种 种 归根 结 底 
还 是 由 于 自身 各 种 特性 导致 的 。float 都 有 哪些 有 意思 的 特性 呢 ? 具体 
如 下 : 








。 包 于 性 ; 

。 块 状 化 并 格式 化 上 下 文 ; 
。 做 坏 文 档 流 ; 

。 没有 任何 margin 合 


“ 包 庄 性 ?在 3.2.1 节 有 详细 阐述 ， 可 能 很 多 人 都 忘记 了 ， 这 里 再 简单 
提 一 下 。 所 谓 “ 包 于 性 ”， 由 “ 包 于 * 和 “ 自 适应 性 ”两 部 分 组 成 。 














(1) 包 右 。 假 设 浮动 元 素 父 元 素 宽度 269px ， 浮 动 元 素 子 元 素 是 
一 个 128px 宽度 的 图 片 ， 则 此 时 浮动 元 素 宽 度 表 现 为 “ 包 右 >， 就 是 里 面 
图 片 的 宽度 128px ， 代 码 如 下 : 





.father { width: 2606px; } 
.float { float: left; } 


.float img { width: 128px; } 
<div class="father"> 
<div class="float"> 
<img src="1.jpg"> 
</div> 
</div> 











(2) 目 适 应 性 。 如 果 浮 动 元 素 的 子 元 系 不 只 是 一 张 128px 宽度 的 


图 片 ， 还 有 一 大 波 普通 的 文字 ， 例 如 : 


<div class="father"> 
<div class="float"> 


<img src="1.jpg"> 我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 























</div> 
</div> 








则 此 时 浮动 元 素 宽 度 束 目 适应 父 元 素 的 266px 宽度 ， 最 终 的 宽度 表现 也 
是 266px 。 








当然 ， 要 想 最 大 宽度 自 适 应 父 元 素 宽 度 ， 一 定 是 在 浮动 元 素 的 “ 首 
选 最 小 宽度 ” 比 父 元 素 的 宽度 要 小 的 前 提 下 ， 比 方 说 上 面 示意 的 “我 是 是 
可 ”等 文字 全 是 一 连 串 超 长 的 英文 字母 ， 则 浮动 元 素 的 宽度 显然 就 不 
是 266px 了 。 如 采 还 不 理解 ， 建 议 再 次 深入 3.2 节 的 内 容 ， 这 里 不 再 敬 











块 状 化 的 意思 是 ， 元 素 一 旦 float 的 属性 值 不 为 none ， 则 
其 display 计算 值 就 是 block 或 者 table 。 举 个 例子 ， 打 开 浏 览 器 控制 
人 台 ， 输 入 如 下 JavaScript 代 码 : 
var span = document.createElement('span'); 
document .body .appendChild(span); 


console.log('1. ' + window.getComputedStyle(span).display); 
// 设置 元 素 左 浮动 


span.style.cssFloat = 'left'; 
console.log('2. ' + Window.getComputedStyle(span).display); 





结果 如 图 6-2 所 示 。 


var span = document .createEIement( "span' ); 
document .body .appendChild(span); 


console.log('1. " + window.getComputedStyle(span).display); 
span.style.cssFloat = "left'; 

console.log('2. "' + Window.getComputedStyle(span).display) 
1. inline 

2. block 





图 6-2 ”浮动 让 元 素 块 状 化 


因此 ， 没 有 任何 理由 出 现下 面 的 样式 组 合 : 


span { 
display: block;  /* 多 余 */ 
float: left; 

} 





span { 
float: left; 
vertical-align: middle; 


} 











也 不 要 指望 使 用 text-align 属性 控制 浮动 元 素 的 左右 对 齐 ， 


为 text-align 对 块 级 元 素 是 无 效 的 。 


float 属性 与 display 属性 值 转换 关系 如 表 6-1 所 示 。 


表 6-1 float 与 display 转换 关系 表 


inline-block 





inline-table table 


table-row-group 
table-column 
table-column-group 


ee 
La 
EL 


除了 ;inline-table 计算 为 table 外 ， 其 他 全 都 是 plock 。 至 于 
float 元 素 的 块 状 格式 化 上 下 文 特性 ， 参 见 6.3 节 。 





ls 


最 后 着 重 讲 一 下 float 特性 的 精髓 一 一 “破坏 文档 流 ”， 这 可 以 说 
是 float 属性 的 万 恶 之 源 ， 但 也 是 float 属性 的 立 命 之 本 ， 是 其 作用 机 
制 之 所 在 。 


6.1.2 float 的 作用 机 制 


float 属性 有 个 著名 的 特性 表现 ， 就 是 会 让 父 元 素 的 局 度 塌陷 ， 大 











多 数 场景 下 ， 这 种 特性 会 影响 “正常 的 ”布局 ， 这 里 我 特意 把 “正常 的 ”三 
个 字 加 了 引号 ， 因 为 站 在 CSS 属 性 的 角度 讲 ， 我 们 希望 的 结果 反而 是 一 
种 不 正 帝 ， 高 度 塌陷 才 是 正 负 。 甚 至 有 些 人 会 问 这 样 的 问题 :“ 如 何 解 
决 浮动 让 父 元 素 高 度 塌陷 的 bug? ” 


bug? 别 逗 了 。 一 定 要 明确 这 一 点 ， 浮 动 使 高 度 塌 陷 不 是 bug， 而 是 
标准 ! 有 人 可 能 会 有 疑问 了 : 怎么 会 有 规范 让 人 “ 干 坏事 ”的 ? 











还 记 不 记得 上 面 说 过 的 float 属性 的 原本 作用 “只 是 为 了 实现 文字 
环绕 效果 ”? 所 以 ， 假 如 你 是 CSS 世 界 的 设计 者 ， 你 会 如 何 利 用 古老 的 
CSS 盒 模型 规则 实现 文字 环绕 效果 ? 


CSS 的 设计 者 就 想 到 了 “破坏 文档 流 ” 这 一 招 ， 具 体 招式 可 参见 下 面 
的 图 例 讲解 ， 故 事 的 背景 是 这 样 的 ， 我 们 的 男 主 人 公 不 仅 人 长 得 帅 ， 而 
且 心 地 非常 善 民 ， 总 十 去 外 面 给 流浪 的 小 猫 小 狗 喂食 ， 但 是 给 小 动物 喂 
食 非 常 耗费 时 间 ， 影 响 学 业 ， 因 此 主人 公 的 父亲 把 男 主 锁 在 家 里 ， 就 像 
图 6-3 所 示 这 样 ， 一 个 框 把 男 主 人 公 给 限制 住 了 。HTML 结 构 如 下 : 





<div class="father"> 
<img src="me.jpg"> 


</div> 
<p class="animal"> 小 猫 1， 小 猫 2，.. .</p> 


























但 是 ， 天 天 学 习 谁 也 受 不 了 ， 为 了 摆脱 父亲 的 限制 ， 男 主 附加 了 大 
鬼 属 性 float ， 这 种 属性 的 作用 之 一 就 是 可 以 使 父 元 又 的 高 度 塌陷 〈 如 
图 6-4 所 示 ) ， 于 是 男 主 就 这 么 摆脱 了 父 杀 的 限制 。 疫 有 了 父 杀 的 限 
制 ， 男 主 就 可 以 和 外 面 的 小 动物 接触 了 ， 如 图 6-5 所 示 。 


从 上 面 的 故事 可 以 看 出 ，float 属性 让 父 元 素 高 度 塌 陷 的 原因 就 是 
为 了 实现 文字 环绕 效果 。 但 是 ， 后 来 事情 的 发 展 超出 了 CSS 设 计 者 的 意 
料 ， 图 文 展示 只 是 新 时 代 Web 展 示 的 一 小 部 分 ， 而 文字 环绕 这 种 上 世纪 
风格 的 效果 现在 已 然 不 流行 了 ， 于 是 float 很 少 发 挥 其 原本 的 作用 ， 反 
而 被 大 肆 使 用 满 屏 布局 。 显 然 ， 布 局 的 时 候 是 不 需要 父 元 素 塌陷 的 。 于 
征 ， 高 度 塌陷 这 种 特性 反而 成 为 了 float 属性 一 个 不 得 不 重视 的 坑 。 


、 江 : 
类 可 男 运 。 父 级 限制 
六 


小 狂 1 ， 小 猫 2， 小 猫 3， 小 猫 4， 小 猫 
5 ,小 猫 6， 小 狗 1 ,小 狗 2， 小 狗 3 ,小 
狗 4 ， 小 狗 3， 小 狗 6 























图 6-3 ”故事 的 主要 角色 示意 





float: left; 
wl 父 级 高 度 丧 隐 





小 猫 1 ， 小 猫 2， 小 猫 3， 小 猫 4， 小 猫 
5 ,小 猫 6， 小 狗 1 ,小 狗 2 ,小 狗 3 ,小 
狗 4， 小 狗 5， 小 狗 6 


图 6-4 ” 男 主 浮动 ， 父 元 素 高 度 开始 塌陷 


然而 ,，“ 高 度 塌陷 ”只 是 让 跟随 的 内 容 可 以 和 浮动 元 素 在 一 个 水 平 线 
上 ,但 这 只 是 实现 “环绕 效果 ”的 条 件 之 一 ， 要 想 实 现 真 正 的 “环绕 效 
果 ”， 就 需要 男 外 一 个 平时 大 家 不 太 在 意 的 特性 ， 那 就 是 “ 行 框 盒子 和 浮 
动 元 素 的 不 可 重 登 性 *， 也 就 是 “ 行 框 盒子 如 采 和 浮动 元 素 的 垂直 高 度 有 
重 登 ， 则 行 框 盒 子 在 正常 定位 状态 下 只 会 跟随 浮动 元 素 ， 而 不 会 及 生 重 


2 )， 
登 。 


























注意 ， 这 里 说 的 是 “ 行 框 盒子 ”， 也 就 是 每 行内 联 元 聚 所 在 的 那个 盒 
子 ， 而 非 外 部 的 块 状 盒子 。 实 际 上 ， 由 于 浮动 元 素 的 塌陷 ， 块 状 盒子 是 
和 疼 片 完 全 重 登 的 ， 例 如 ， 我 们 给 环 纪 的 <p> 元 系 设 置 个 背景 色 ， 同 时 
把 图 片 搞 透明 ， 则 效果 如 图 6-6 所 示 。 





小 猫 1 ， 小 猫 2， 小 猫 3 ， 小 猎 
4 ,小 猫 5 ， 小 猫 6 ， 小 狗 1 ， 
小 狗 2 ， 小 狗 3， 小 狗 4 ， 小 狗 


5， 小 狗 6 


图 6-5 ”小 动物 们 环绕 效果 


小 猫 1， 小 猫 2， 小 猫 3， 小 猫 

4 ,小 猫 5 ,小 猫 6， 小 狗 1 ， 

小 狗 2， 小 狗 3 ,小 狗 4 ,小 狗 
,小 狗 6 


图 6-6” 块 元 素 区 域 和 图 片 完全 重 司 








但 是 ， 块 状 盒子 中 的 “ 行 框 盒子 ” 却 被 浮动 元 素 限制 ， 没 有 任何 的 重 
登 ， 我 们 可 以 借助 : :first-line 伪 元 素 暴 露 第 一 行 的 “ 行 框 盒子 ”区 
域 ，CSS 代 码 如 下 : 





.animal:first-line { 
background: red; 
color: white; 


} 





结果 如 图 6-7 所 示 。 





这 种 “限制 ?是 根深 带 固 的 ， 也 就 是 “ 行 框 盒子 ”的 区 域 永 远 束 这 么 
大 ， 只 要 不 改变 当前 布局 方式 ， 我 们 是 无 法 通过 其 他 CSS 属 性 改变 这 个 
区 域 大 小 的 。 这 惑 是 在 4.3 节 提 到 的 译 动 后 面 元 素 margin 负 无 穷 大 依然 











无 效 的 原因 。 例 如 ， 这 里 再 新 增 如 下 CSS 代 码 : 


.animal { 
margin-left: -166pX; 


} 








就 会 发 现 ， 只 有 外 部 的 块 状 容 右 盒子 尺寸 变 大 ， 而 和 浮动 元 系 垂 直方 问 
有 和 章 登 的 “ 行 框 鲍 子 ” 依 然 被 限 死 在 那里 ， 如 图 6-8 所 示 。 


解 float 属性 的 
基于 float 属性 
知道 一 些 意料 之 


至 此 ， 浮 动作 用 的 基本 机 制 算是 介绍 完了 。 那 么 
作用 机 制 有 什么 用 呢 ? 很 有 用 ， 除 了 下 一 市 会 者 重 介 
的 流体 布局 之 外 ， 还 有 很 有 用 的 一 点 就 是 让 我 们 一 下 
外 场景 发 生 的 原因 以 及 如 何 快速 对 症 下 药 。 


7 
绍 
7 








被 限制 的 行 杠 龟 子 





汶 猫 1 ,小 猫 2 ,小 猫 3 ， 小 猫 

4 ,小 猫 5， 小 猫 6， 小 狗 1 ， 

小 狗 2， 小 狗 3， 小 狗 4， 小 狗 
3 ,小 狗 6 








图 6-7 第 一 行 背 景 显示 了 行 框 盒子 的 区 域 





;小 狂 3 ,小 猎 
4 ,小 猫 5 ,小 猫 6， 小 狗 1 ， 
小 狗 2 ,小 狗 3 , 小 狗 4， 小 狗 


5 ， 小 狗 6 





图 6-8 ” 行 框 盒子 区 域 固定 





我 们 不 妨 看 下 面 这 个 很 有 学 习 价 值 的 例子 。 很 多 人 会 有 这 样 的 想 
法 ， 就 是 认为 一 个 元 素 只 要 设置 了 具体 的 高 度 值 ， 就 不 需要 担心 float 
属性 造成 的 高 度 塌 陷 的 问题 了 ， 既 然 有 了 高 度 ， 何 来 “高 度 塌陷 >”。 这 人 名 








话 对 不 对 呢 ? 是 对 的 。 但 是 ， 其 中 也 隐 舍 了 陷阱 ， 因 为 “文字 环绕 效 
果 ” 是 由 两 个 特性 〈( 即 “ 父 级 局 度 塌陷 ”和 “ 行 框 盒子 区 域 限 制 *») 共同 作 
用 的 结果 ， 定 高 只 能 解决 “ 父 级 局 度 塌陷 ”市 来 的 影响 ， 但 是 对 “ 行 框 盒 
子 区 域 限 制 * 却 没有 任何 效果 ， 结 末 导 致 的 问题 是 浮动 元 素 垩 直 区 域 一 
旦 超出 高 度 范围 ， 或 者 下 面 元 素 margin-top 负 值 上 偏 移 ， 就 很 容易 使 
后 面 的 元 素 发 生 “ 环 绕 效 果 ””， 代 码 示意 如 下 : 











<div class="father"> 

<div class="float"> 

<img src="zxx.jpg"> 

</div> 

我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 
</div> 
<div> 虽 然 你 很 帅 ， 但 是 我 对 你 不 感 兴趣 。</div> 
.father { 

height: 64px; 

border: 1px solid #444; 














.float { 
float:1left; 
} 
.float img { 
width: 66px; height: 64px; 
} 





从 这 段 代 码 可 以 看 出 父 级 元 素 .father 高 度 设置 的 和 图 片 高 度 一 模 
一 样 ， 都 是 64px。 按 道 理 ， 下 面 的 “虽然 你 很 籼 ， 但 是 我 对 你 不 感 兴 
趣 。” 这 些 文字 应 该 大 左 显 示 ， 但 最 后 的 结果 却 是 图 6-9 所 示 的 这 样 。 















是 帅 可 ， 好 巧 啊 ,我 也 是 
帅 蜗 ， 原 来 看 这 本 书 的 人 都 


是 帅 术 ~ 





wy 虽然 你 很 帅 ， 但 是 我 对 你 不 
感 兴起 。 
起 被 专线 ,了 





图 6-9 意料 之 外 的 文字 环绕 效果 


口口声声 说 “不 感 兴趣 ”， 最 后 却 依 旧 环 绕 在 帅哥 图 片 周 围 。 为 什么 
会 出 现 这 种 现象 呢 ? 





里 然 肉 眼看 上 去 容器 和 图 片 一 样品 ， 但 是 ， 大 家 都 读 过 5.3 节 ， 应 
该 都 知道 内 联 状 态 下 的 图 片 底部 是 有 间 隐 的 ， 也 就 是 .float 这 个 浮动 
元 素 的 实际 高 度 并 不 是 64px ， 而 是 要 比 64px 高 几 像 系 ， 币 来 的 问题 就 
征 浮动 元 素 的 高 度 超出 .father 几 像 系 。 于是， 下 面 的 文字 就 遭 歼 了 ， 
因为 “虽然 你 很 帅 .…...” 这 上 段 文 字 所 在 的 “ 行 框 盒子 ”和 浮动 元 素 在 垂直 位 
置 有 了 重 登 ， 尽 管 就 那么 几 像素 。 于 是 ， 区 域 被 限制 ， 形 成 了 图 6-9 所 
示 的 “被 环绕 ?效果 。 




















眼见 为 实 ， 如 果 不 相信 上 面 帅 哥 的 魅力 ， 可 以 手动 输入 
http://demo.cssworld.cn/ 6/1-1.php 或 者 扫 右 侧 的 二 维 码 感受 一 下 。 








因此 ， 当 使 用 浮动 元 素 的 时 候 ， 比 较 稳 妥 的 做 法 还 是 采用 一 些 手 段 
干净 地 清除 浮动 带 来 的 影响 ， 以 避免 很 多 意料 之 外 的 样式 问题 的 发 生 。 


6.1.3 ”float 更 深入 的 作用 机 制 








实际 项 目 开发 中 不 可 能 总 是 浮动 元 系 在 正 闻 流 元 素 的 前 面 ， 下 面 来 
看 一 个 例子 。 例 如 ， 有 一 个 标题 ， 代 码 如 下 : 


<h3> 标 题 </h3> 


一 直 用 得 好 好 的 ， 突 然 来 了 一 个 需求 ， 要 在 右 侧 加 一 个 “更 多 ”链接 ， 于 
古 HTML 变 成 下 面 这 样 (我们 这 里 先 忽略 语义 是 否 得 当 的 问题 〉: 


<h3> 标 题 <a href="#"> 更 多 </a></h3> 


请 问 : 我 们 直接 让 <a> 元 素 float:right 可 不 可 以 ? 


考虑 到 本 书 的 目标 浏览 器 是 IE8 及 以 上 版 本 浏览 器 ， 因 此 ， 答 案 
是 : 可 以 。 但 是 ， 如 果 你 的 项 目 很 不 笠 还 需要 兼容 IE7 之 类 的 浏览 器 ， 
则 不 能 这 样 处 理 ， 因 为 “更 多 ”文字 会 浮动 在 下 一 行内 容 的 右边 ， 而 非 标 
题 的 右边 。 

















以 前 不 少 人 问 我 为 什么 琅 6 和 IE7 浮 动 元素 会 下 一 行 显示 ， 但 却 没有 
人 间 为 什么 三 8 及 以 上 版 本 浏览 器 是 在 一 行 显示 ， 可 见 ， 似 乎 同行 显示 
更 符合 大 家 的 直观 认 知 。 好 在 规范 也 确实 约定 了 浮动 元 素 和 内 联 元 素 在 
行 显示 ， 但 是 ， 如 果 我 问 大 家 具体 的 作用 机 制 是 什么 ， 恐 怕 鲜 有 人 能 


Ai 全 \ 捷 
回答 清楚 ! 














单 徘 感性 认 知 而 非 具 体 原理 理解 CSS 的 样式 表现 很 多 时 候 是 不 靠 谱 
的 。 比 方 说 ， 还 是 这 个 例子 ， 假 设 这 里 的 “标题 内容 非常 长 ， 超 过 了 一 
行内 容 ， 请 问 : 这 里 的 “更 多 ”<ay> 链接 元 素 该 如 何 显 示 ? 是 图 6-10 所 示 
的 这 样 吗 ? 答案 是 : 不 是 的 。 正 确 表现 应 该 如 图 6-11 所 示 。 








我 是 一 个 非常 长 足 更 多 
以 换行 的 标题 文字 内 容 


图 6-10 ”假想 浮动 效果 图 


是 一 个 非常 长 足以 换 
行 的 标题 文字 内 容 更 多 


图 6-11 真实 浮动 效果 图 





为 什么 呢 ? 要 想 解释 透彻 ， 那 话 又 多 了 。 首 先 ， 我 们 需要 了 解 两 个 
和 float 相关 的 术语 ， 一 是 “浮动 锚 点 ”(float anchor) ， 二 是 “浮动 参 


考 ”(float reference) 。 





。 浮动 锚 点 是 float 元 素 所 在 的 “ 流 ” 中 的 一 个 点 ， 这 个 点 本 身 并 不 浮 
动 ， 就 表现 而 言 更 像 一 个 没有 margin、border 和 padding 的 空 的 
内 联 元 素 。 

。 浮动 参考 指 的 是 浮动 元 素 对 齐 参考 的 实体 。 

















在 CSS 世 界 中 ，float 元 素 的 “浮动 参考 ?是 “ 行 框 例子”， 也 就 
是 float 元 系 在 当前 “ 行 框 盒子 ”内 定位 。 再 强调 一 这， 是 “ 行 框 盒子 ”， 
不 是 外 面 的 包含 块 盒子 之 类 的 东西 ， 因 为 CSS 浮 动 设计 的 初衷 仪 仪 是 实 
现 文字 环绕 效果 。 在 CSS 新 世界 中 ，float 被 赋予 了 更 多 的 作用 和 使 
命 , “浮动 参考 ?就 不 仅仅 是 “ 行 杠 例子" 了， 不 过 此 非 本 书 重 点 ， 束 不 展 
开 了 。 


























正 是 因为 float 定位 参考 的 是 “ 行 框 盒 子 ， 所 以 “更 多 ” 才 会 在 第 二 
行 显示 。 还 没 理解 ? 那 再 具体 解释 一 下 : 每 一 行内 联 元 系 都 有 一 个 “ 行 
框 盒子 ”， 这 个 例子 中 标题 文字 比较 多 ， 两 行 显示 了 ， 因 此 有 上 下 两 











个 “ 行 框 盒子 ”， 而 “更 多 ”所 在 的 <ay> 元 素 是 在 标题 文字 后 面 ， 位 于 第 二 
行 ， 因 此 ， 这 里 设置 了 float :right 的 <a> 元 素 是 相对 于 第 二 行 的 “ 行 
框 例子 ”对 齐 的 ， 也 就 是 图 6-11 所 示 的 效果 。 

趁 热 打铁 ， 假 如 说 我 们 的 标题 文字 再 多 两 个 字 ， 正 好 两 行 ， 请 
问 :“ 更 多 ?两 字 又 当 如 何 显 示 呢 ? 估计 不 少 人 已 经 可 以 脑 补 出 最 终 的 样 
式 表现 了 , “更 多 ”会 孤零零 地 显示 在 第 三 行 的 右边 ， 但 容 吉 高 度 仍然 是 
两 行文 字 的 高 度 ， 如 图 6-12 所 示 。 


是 一 个 非常 长 长 到 足 
以 换行 的 标题 文字 内 容 
更 多 


图 6-12 “更 多 ”显示 在 第 3 行 




















然而 ， 上 面 的 解释 有 一 个 很 大 的 漏洞 就 是 ， 如 果 float 元 素 前 后 全 
古 块 元 系 ， 那 根本 没有 “ 行 杠 盒子”， 何 来 对 齐 的 说 法 ? 此 时 ， 束 需要 上 
面 提 到 的 “浮动 锁 点 ?出 马 了 。 “浮动 销 点 ”这 个 术语 名 称 本 身 很 具有 欺骗 
性 ， 看 上 去 应 该 与 float 的 定位 位 置 有 关 ， 实 际 上 关系 浅薄 ， 在 我 看 
来 ， 其 作用 就 是 产生 “ 行 框 盒 于 ”， 因 为 “浮动 锚 点 ”表现 如 同一 个 空 的 内 
联 元 隶 ， 有 内 联 元 素 目 然 就 有 “ 行 框 例子 "”， 于 是 ，float 元 素 对 齐 的 参 
考 实 体 “ 行 框 盒子 ”对 于 块 状元 素 也 同样 适用 了 ， 只 不 过 这 个 “ 行 框 全 
子 ” 由 于 没有 任何 内 容 ， 所 以 无 尺寸 ， 看 不 见 也 摸 不 着 图 了 。 
































6.1.4 float 与 流体 布局 


float 通过 破坏 正常 CSS 流 实现 CSS 环 绕 ， 带 来 了 烦人 的 “高 度 塌 
陷 2” 的 问题 ， 然 而 ， 凡 事 都 具有 两 面 性 ， 只 要 了 解 透彻 ， 说 不 定 就 可 以 


变 废 为 宝 、 化 腐朽 为 神奇 。 例 如 。 我 们 可 以 利用 float 破坏 CSS 正 常 流 
的 特性 ， 实 现 两 栏 或 多 栏 的 自 适 应 布局 。 


还 记 不 记得 之 前 小 动物 环绕 的 例子 ? 其 实 我 们 稍 加 改造 ， 束 能 变 成 
一 侧 定 宽 的 两 栏 自 适应 布局 ，HTML 和 CSS 代 码 如 下 : 


<div class="father"> 

<img src="me.jpg"> 

<p class="animal"> 小 猫 1， 小 猫 2，. . .</p> 
</div> 
.father { 

overflow: hidden; 

















.father > img { 
width: 66px; height: 64px; 
float: left; 

} 

.animal { 
margin-left: 76pX; 





和 文字 环绕 效果 相 比 ， 区 别 束 在 于 .animal 多 了 一 个 margin- 
left:76px ， 也 就 是 所 有 小 动物 都 要 跟 男 主 保持 至 少 78px 的 距离 ， 由 
于 图 片 宽度 就 66px ， 因 此 不 会 发 生 环绕 ， 自 适应 效果 达成 。 











原理 其 实 很 简单 ，.animal 元 素 没有 浮动 ， 也 没有 设置 宽度 ， 
此 ， 流 动 性 保持 得 很 好 ， 设 置 margin-left 、border-left 或 
者 padding-left 都 可 以 自动 改变 content box 的 尺寸 ， 继 而 实现 了 宽度 
目 适 应 布局 效果 。 








我 们 不 妨 对 比 一 下 环绕 效果 的 背景 区 域 和 这 里 自 适 应 效果 的 背景 区 
域 〈 见 图 6-13) ， 理 解 起 来 应 该 会 更 加 直 白 。 





小 猫 1 ， 小 猫 2， 小 狂 3 ,小 小 猫 1， 小 猫 2 ,小 狭 3 ,小 





猫 4， 小 猫 5， 小 猫 6， 小 狗 猫 4， 小 猫 5， 小 猫 6， 小 狗 
1 小 狗 2， 小 狗 3， 小 狗 4 ， 1 ,小 狗 2， 小 狗 3， 小 狗 
小 狗 3， 小 狗 6 一 ”上 向 相向 6 





图 6-13 ”环绕 效果 和 自 适 应 效果 背景 区 域 对 比 图 








没有 对 比 束 没有 震撼 。 很 多 人 实现 这 样 的 效果 会 采用 下 面 这样 的 砖 
头 式 的 浮动 布局 : 
.animal { 


width: 176px; 
float: right; 


} 





乍 一 看 ， 效 果 一 样 ， 但 是 实际 上 这 容错 性 和 可 拓展 性 就 差 远 了 。 
旦 我 们 的 容器 宽度 发 生 了 变化 ， 那 么 这 个 布局 就 基本 作废 ， 宽 度 小 了 ， 
两 栏 内 容 上 下 错位 ， 宽 度 变 大 ， 中 间 间 隐 宽 到 可 以 撑 船 ， 就 是 因为 浮动 

和 宽度 破坏 了 CSS 的 流动 性 。 这 种 感觉 就 像 是 把 记忆 合金 变 成 了 死板 砖 
头 。 在 我 看 来 ， 这 类 布局 是 没有 任何 理由 使 用 这 种 “ 砌 砖头 ? 式 的 技术 方 
案 的 。 一 个 简 简 单单 的 margin-left 岂 不 比 需要 计算 、 代 码 量 多 、 可 
维护 性 差 的 一 堆 CSS 代 码 好 很 多 ! 

















关于 此 上 自 适应 布局 效果 ， 可 以 手动 输入 http://demo.cssworld.cn/6/1- 
2.php 或 者 扫 右 侧 的 二 维 码 感受 一 下 。 














是 可 以 的 ， 例 如 : 


.left { 
float: left; 
width: 58%; 

} 

.right { 
margin-left: 562%; 

} 





如 果 是 多 栏 布局 ， 也 同样 适用 ， 尤 其 图 6-14 所 示 的 这 种 布局 。 





一 语 第 112 章 动物 环绕 re" 








图 6-14 ”中间 内 容 居 中 的 左 中 右 布局 





假设 HTML 结 构 如 下 : 





<div class="box"> 
<a href class="prev">&laquo; 上 一 章 </a> 
<a href class="next"> 下 一 章 &raquo;</a> 
<h3 class="title"> 第 112 章 动物 环绕 </h3> 


</div> 
则 CSS 可 以 如 下 : 


.prev { 
float: left; 


.Next { 
float: right; 


} 

.title { 
margin: 6 76px 
text-align: center; 


} 








也 束 是 说 ，.title 所 在 的 <h3> 标题 元 素 直 接 左 右 margin ， 借 助 流 体 
特性 ， 保 证 不 会 和 两 个 文字 链接 重 靶 。 


6.2 ”float 的 天 然 克 星 clear 


6.2.1 什么 是 clear 属性 


生生 相克 ，float 这 个 魔鬼 属性 也 不 例外 。CSS 有 一 个 专门 用 来 处 
理 float 属性 带 来 的 高 度 塌陷 等 问题 的 属性 ， 这 个 属性 就 是 clear 。 其 
语法 如 下 : 


clear: none | left | right | both 


如 果 单 看 字面 意思 ，clear:1left 应 该 是 “清除 左 浮 
动 "””clear:right 应 该 是 “清除 右 浮 动 ” 的 意思 ， 实 际 上 ， 这 种 解释 是 
有 问题 的 ， 因 为 浮动 一 直 还 在 ， 并 没有 清除 。 没 错 ， 并 没有 清除 。 











官方 对 clear 属性 的 解释 是 :“ 元 系 盒 子 的 边 不 能 和 前 和 面 的 浮动 元 
素 相 邻 。” 





虽然 有 些 抛 口 ， 但 是 有 一 点 是 可 以 体会 出 来 的 ， 就 是 设置 了 clear 
属性 的 元 素 自身 如 何如 何 ， 而 不 是 让 float 元 素 如 何如 何 ， 有 种 “ 己 所 
不 欲 勿 施 于 人 ”的 意味 在 里 面 。 因 此 ， 我 对 clear 属性 值 的 理解 是 下 面 
这 样 的 。 











。none : 默认 值 ， 左 右 浮 动 来 就 来 。 
。 left: 左 侧 抗 浮动 。 
。right : 右 侧 抗 浮动 。 
。 both : 两 侧 抗 浮动 。 


大 家 有 没有 发 现 ， 我 们 平时 除了 clear:both 这 个 声明 比较 多 以 
外 ，left 和 right 这 两 个 属性 值 几 乎 无 人 问 妾 ， 是 因为 left 和 right 
这 两 个 值 没有 作用 吗 ? 


我 的 答案 非常 直 白 : 没 错 ， 确 实 没 有 什么 用 ! 凡是 clear:1left 或 
者 clear:right 起 作用 的 地 方 ， 一 定 可 以 使 用 clear:both 蔡 换 ! 


举 个 例子 ， 假 设 容器 宽度 足够 宽 ， 有 10 个 <1i> 元 系 ， 设 置 了 如 下 
CSS 代 码 : 





{ 

width: 26px; height: 28px; 
margin: 5px; 

float: left; 


li:nth-of-type(3) { 
clear: both; 


} 


L 


也 就 是 说 ， 第 三 个 <1i> 设置 了 clear:both ， 请 问 表 现 是 怎样 的 ? 或 者 
这 么 问 吧 : 列表 最 后 是 1 行 显示 、2 行 显示 ， 还 是 3 行 显 示 呢 ? 
































我 们 很 容易 被 both 这 个 单词 误导 ， 因 为 其 字面 意思 是 “同时 ”， 所 
以 很 多 人 会 认为 是 3 行 ， 但 实际 上 只 会 显示 2 行 ， 如 图 6-15 所 示 。 


图 6-15 “列表 2 行 显示 








原因 在 于 ，clear 属性 是 让 目 身 不 能 和 前 面 的 浮动 元 素 相 邻 ， 注 意 
这 里 “前 面 的 ?3 个 字 ， 也 就 是 clear 属性 对 “后 面 的 ”浮动 元 素 是 不 邮 不 
问 的 ， 因 此 才 2 行 显示 而 非 3 行 。 





更 进一步 ， 考 虑 到 float 属性 要 么 就 left 要 么 就 right ， 不 可 能 
同时 存在 ， 同 时 由 于 clear 属性 对 “后 面 的 ”浮动 元 素 不 闻 不 问 ， 因 此 ， 
当 clear:1left 有 效 的 时 候 ，clear:right 必定 无 效 ， 也 就 是 此 时 
clear:left 等 同 于 设置 clear:both; 同样 地 ，clear:right 如 果 有 
效 也 是 等 同 于 设置 clear:both 。 由 此 可 见 ，clear:1left 和 
clear:right 这 两 个 声明 就 没有 任何 使 用 的 价值 ， 人 至 少 在 CSS 世 界 中 是 
如 此 ， 直 接 使 用 clear:both 吧 。 


6.2.2 ”成事 不 足 败 事 有 余 的 clear 


clear 属性 只 有 块 级 元 素 才 有 效 的 ， 而 : :after 等 伪 元 素 默 认 都 是 
内 联 水 平 ， 这 就 是 借助 伪 元 素 清 除 浮动 影响 时 需要 设置 display 属性 值 








的 原因 。 


.Clear:after { 
content: ''; 
display: table;  // 也 可 以 是 'block'， 或 者 是 'list-item' 








clear: both; 








} 
然而 ， 利 用 伪 元 素 或 者 直接 使 用 下 面 HTML， 有 时 候 也 会 产生 一 些 意 想 
不 到 的 问题 : 


<div style="clear:both;"></div> 


继续 前 面 那 个 小 动物 环绕 的 例子 ， 如 果 我 们 在 右 侧 目 适 应 内 容 里 面 
使 用 了 类 似 这 样 的 样式 ， 则 可 能 会 发 生 右边 的 内 容 跑 到 图 片 下 边 的 情 
况 ，HTML 代 码 如 下 : 








<div class="father"> 
<img src="me.jpg"> 
<div class="animal"> 
小 猫 1， 小 猎 2， 
<div class="clear"></div> 


小 猫 3， 小 猫 4，... 
</div> 
</div> 








结果 却 是 如 图 6-16 所 示 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/6/2-1.php 或 者 扫 下 面 的 二 维 码 。 








小 狂 1 ， 小 氏 2 ， 







小 镜 3， 小 猫 4 ,小 猫 5 ,小 
猫 6， 小 狗 1 ,小 狗 2， 小 狗 
3 ， 小 狗 4， 小 狗 3， 小 狗 6 








图 6-16 ”clear:both 导致 自 适应 布局 错位 示意 





由 于 clear:both 的 作用 本 质 是 让 自己 不 和 float 元 素 在 一 行 显 
示 ， 并 不 是 真正 意义 上 的 清除 浮动 ， 因 此 float 元 素 一 些 不 好 的 特性 依 
然 存 在 ， 于 是 ， 会 有 类 似 下 面 的 现象 。 














(1) 如 果 clear:both 元 素 前 面 的 元 素 就 是 float 元 素 ， 
则 margin-top 负 值 即使 设 成 -9999px ， 也 不 见 任何 效果 。 





(2) clear:both 后 面 的 元 素 依旧 可 能 会 发 生 文字 坏 绕 的 现象 。 
举 个 例子 ， 如 下 HTML 和 CSS: 





<div class="father"> 


<img src="zxx.jpg"> 
我 是 帅哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 原 来 看 这 本 书 的 人 都 是 帅哥 ~ 


</div> 











<div> 昌 然 你 很 籼 ， 但 是 我 对 你 不 感 兴趣 。</div> 
.father:after { 

content: ''; 

display: table; 

clear: both; 


.father img { 
float:1left; 
width: 66px; height: 64px; 


.father + div { 
margin-top: -2px; 


} 





虽然 .father 父 元 素 的 最 后 设置 了 clear :both 来 阻止 浮动 对 后 面 元 素 
的 影响 ， 但 是 最 后 结果 错位 依然 发 生 了 ， 如 图 6-17 所 示 。 








是 帅 店 ， 好 巧 啊 ， 我 也 是 
帅哥 ， 原 来 看 这 本 书 的 人 者 


是 帅 朝 ~ 






虽然 你 很 帅 ， 但 是 我 对 你 不 


所 EM 
MA/ < 起 。 





图 6-17clear :both 依然 发 生 布 局 错位 示意 图 


由 此 可 见 ，clear:both 只 能 在 一 定 程度 上 消除 浮动 的 影响 ， 要 想 
完美 地 去 除 浮 动 元 素 的 影响 ， 还 需要 使 用 其 他 CSS 声 明 。 那 应 该 使 用 哪 
些 CSS 声 明 呢 ? 请 看 6.3 节 。 


6.3 CSS 世界 的 结 界 一 -BFC 


6.3.1 BFC 的 定义 


BFC 全 称 为 block formatting context， 中 文 为 “ 块 级 格式 化 上 下 文 ”。 
相对 应 的 还 有 IFC， 也 就 是 inline formatting context， 中 文 为 “内 联 格 式 化 





上 下 ”不 过 IFC 作 用 和 影响 比较 隐 星 ， 我 们 就 不 介绍 了 ， 我 们 将 学 习 重 
点 放 在 BFC 上 。 


关于 BFC 各 种 特性 什么 的 ， 说 起 来 很 哆 叶 ， 而 我 喜欢 用 “CSS 世 界 的 
结 界 ” 这 种 称谓 概括 BFC 的 特性 。“ 结 界 ” 这 个 词 大 家 应 该 都 理解 的 ， 指 
通过 一 些 特 定 的 手段 形成 的 封闭 空间 ， 里 面 的 人 出 不 去 ， 外 面 的 人 进 不 
来 ， 具 有 极 强 的 防御 力 。BFC 的 特性 表现 如 出 一 入 。 





大 家 请 记 住 下 面 这 个 表现 原则 : 如 果 一 个 元 素 具有 BFC， 内 部 子 元 
素 再 怎么 翻 江 倒 海 、 翻 云 覆 雨 ， 都 不 会 影响 外 部 的 元 素 。 所 以 ，BFC 元 
素 是 不 可 能 发 生 margin 重 车 的 ， 因 为 margin 重 炙 是 会 影响 外 面 的 元 素 
的 ;BFC 元素 也 可 以 用 来 清除 浮动 的 影响 ， 因 为 如 果 不 清除 ， 子 元 素 浮 
动 则 父 元 素 高 度 塌陷 ， 必 然 会 影响 后 面 元 素 布局 和 定位 ， 这 显然 有 违 
BFC 元 素 的 子 元 素 不 会 影响 外 部 元 素 的 设 定 。 




















那 什么 时 候 会 触发 BFC 呢 ?常见 的 情况 如 下 : 


<htm1> 根 元 素 ; 

float 的 值 不 为 none ; 

overflow 的 值 为 auto、scroll 或 hidden ; 

display 的 值 为 table-cell、table-caption 和 inline-block 
中 的 任何 一 个 ; 

position 的 值 不 为 relative 和 static 。 


换言之 ， 只 要 元 素 符合 上 面 任意 一 个 条 件 ， 就 无 须 使 
用 clear:both 属性 去 清除 浮动 的 影响 了 。 因 此 ， 不 要 见 到 一 个 <divy> 
元 素 就 加 个 类 似 .clearfix 的 类 名 ， 否 则 只 能 暴露 你 必 弱 的 CSS 基 本 





Ws 
6.3.2 BFC 与 流体 布局 


BFC 的 结 界 特性 最 重要 的 用 途 其 实 不 是 去 margin 重 登 或 者 是 清 
除 float 影响 ， 而 是 实现 更 健壮 、 更 智能 的 自 适应 布局 。 








我 们 还 是 从 最 基本 的 文字 环绕 效果 说 起 。 还 是 那个 小 动物 环绕 的 例 


<div class="father"> 
<img src="me.jpg"> 
<p class="animal"> 小 猫 1， 小 猫 2，. . .</p> 

















</divy> 
img { float: left; } 





效果 如 图 6-18 所 示 。 此 时 .animal 的 内 容 显 然 受 到 了 设置 了 float 
属性 值 的 图 片 的 影响 而 被 环绕 了 。 此 时 如 果 我 们 给 .animal 元 素 设置 具 
有 BFC 特 性 的 属性 ， 如 overflow:hidden ， 如 下 : 


.animal { overflow: hidden; } 


则 根据 BFC 的 表现 原则 ， 上 有 具有 BFC 特 性 的 元 素 的 子 元 素 不 会 受 外 部 元 系 
影响 ， 也 不 会 影响 外 部 元 系 。 于 是 ， 这 里 的 .animal 元 素 为 了 不 和 浮动 
元 素 产 生 任 何 交 集 ， 顺 着 浮动 边缘 形成 自己 的 封闭 上 下 文 ， 如 图 6-19 所 
示 《〈 垂 直 虚 线 为 辅助 示意 ) 。 











小 猫 1 ,小 猫 2， 小 猫 3 ,小 

猫 4， 小 猫 5， 小 猫 6， 小 狗 

1 小 狗 2， 小 狗 3， 小 狗 4 ， 
小 狗 5 ,小 狗 6 








图 6-18 “文字 环绕 基本 效果 示意 





小 猫 1 ,小 猫 2 ,小 猫 3 ,小 

尊 4， 小 猫 5， 小 猫 6， 小 狗 

1 ,小 狗 2 ,小 狗 3 ,小 狗 4 ， 
浮动 边 红 = 小 狗 5， 小 狗 6 





图 6-19 ”overflow:hidden 下 的 布局 标注 


也 就 是 说 ， 普 通 流体 元 素 在 设置 了 overflow:hidden 后 ， 会 自动 
填 满 容器 中 除了 浮动 元 素 以 外 的 剩余 空间 ， 形 成 自 适 应 布局 效果 ， 而 且 
这 种 自 适 应 布局 要 比 纯 流 体 自 适 应 更 加 智能 。 比 方 说 ， 我 们 让 图 卢 的 尺 
寸 变 小 或 变 大 ， 右 侧 自 适应 内 容 无 须 更 改 任 何 样式 代码 ， 都 可 以 自动 填 
满 剩 余 的 空间 。 例 如 ， 我 们 把 图 片 的 宽度 从 68px 改 成 38px ， 结 果 如 图 
6-20 所 示 。 

















小 猫 1 ， 小 猫 2 ， 小 猫 3， 小 猫 4 ， 
小 猫 5， 小 猫 6， 小 狗 1， 小 狗 2 ， 
小 狗 3， 小 狗 4 ,小 狗 5， 小 狗 6 











图 6-20 ”浮动 元 素 宽度 变 小 后 内 容 自 动 完 美 填充 














实际 项 目 开 发 的 时 候 ， 图 片 和 文字 不 可 能 靠 这 么 近 ， 如 采 想 要 保持 
合适 的 间距 ， 那 也 很 简单 ， 如 采 元 素 是 左 浮 动 ， 则 浮动 元 素 可 以 设 
置 margin-right 成 透明 border-right 或 padding-right ; 又 或 者 右 
侧 BFC 元 素 设 置 成 透明 border-left 或 者 padding-left ， 但 不 包括 
margin-left ， 因 为 如 果 想 要 使 用 margin-left ， 则 其 值 必须 是 浮动 
元 素 的 宽度 加 间 隐 的 大 小 ， 就 变 成 动态 不 可 控 的 了 ， 无 法 大 规模 复 用 。 
因此 ， 套 用 上 面 例子 的 HTML， 假 设 我 们 希望 间 际 是 10px， 则 下 面 这 儿 
种 写法 都 是 可 以 的 : 








。 img { margin-right: 16px; } 

e。 img { border-right: 16px solid transparent; } 

e img { padding-right: 16px; } 

e .animal { border-left: 16px solid transparent; } 


e .animal { padding-right: 1i6px; } 


一 般 而 言 ， 我 吝 欢 通过 在 浮动 元 系 上 设置 margin 来 控制 间距 ， 也 
就 是 下 面 的 CSS 代 码 : 


img { 
float: left; 
margin-right: 16px; 


} 
.animal { 
overflow: hidden; 


} 





布局 效果 如 图 6-21 所 示 。 





小 猫 1， 小 猫 2， 小 猫 3 ,小 
猫 4， 小 猫 5， 小 猫 6， 小 狗 
1 ,小 狗 2 ,小 狗 3， 小 狗 
4 ,小 狗 5， 小 狗 6 





图 6-21 设置 合适 间距 后 的 效果 








小 狂 1 ， 小 猫 2 ， 











小 猫 3 ， 小 猫 4 ,小 猫 5 ,小 
猫 6， 小 狗 1 ,小 狗 2， 小 狗 
3 ,小 狗 4， 小 狗 5， 小 狗 6 








图 6-22 ”clear:both 导致 自 适应 布局 错位 示意 图 





和 基于 纯 流 体 特性 实现 的 两 栏 或 多 栏目 适应 布局 相 比 ， 基 于 BFC 特 
性 的 目 适 应 布局 有 如 下 优点 。 





(1) 目 适 应 内 容 由 于 封闭 而 更 健壮 ， 容 错 性 更 强 。 比 方 说 ， 内 部 
设置 clear:both 不 会 与 float 元 素 相互 干扰 而 导致 错位 ， 也 就 不 会 发 
生 类 似 于 图 6-22 所 示 的 问题 。 











(2) 目 适 应 内 容 上 自动 填 满 译 动 以 外 区 域 ， 无 须 关 心 浮 动 元 素 宽 
度 ， 可 以 整 站 大 规模 应 用 。 比 方 说 ， 抽 象 几 个 通用 的 布局 类 名 ， 如 : 








.left { float: left; } 
.right { float: right; } 


.bfc { overflow: hidden; } 





于 是 ， 只 要 遇 到 两 栏 结 构 ， 直 接 使 用 上 面 的 结构 类 名 就 可 以 完成 基 
本 的 布局 。HTML 示 意 如 下 : 


<div class="bfc"> 
<img src="me.jpg" class="left"> 


<p class="bfc"> 小 猫 1， 小 猫 2，. . .</p> 
</div> 

















上 面 的 类 名 只 是 示意 ， 具 体 可 根据 自己 项 目的 规范 设 定 ， 甚 至 直接 
用 .1 或 者 .r 这 样 的 极 短命 名 也 是 可 以 的 。 

而 纯 流体 布局 需要 大 小 不 确定 的 margin 或 padding 等 值 撑 开 合 适 
间距 ， 无 法 CSS 组 件 人 化。 例如， 前面 出 现 的 76px ， 其 他 类 似 布 局 可 能 
就 是 98px ， 无 法 大 规模 复 用 : 


.animal { margin-left: 76px; } 


[L 


两 种 不 同 原理 的 自 适 应 布局 策略 的 高 下 一 看 便 知 。 甚 至 可 以 这 么 
说 ， 有 了 BFC 自 适应 布局 ， 纯 流体 特性 布局 基本 上 没有 了 存在 的 价值 。 
然而 ， 只 是 理论 上 如 此 。 如 果 BFC 自 适应 布局 真 那 么 超 能 ， 那 为 何 并 没 
有 口 口 相传 呢 ? 


那 我 们 就 得 进一步 深入 理解 了 。 


理论 上 ， 任 何 BFC 元 素 和 float 元 素 相 遇 的 时 候 ， 都 可 以 实现 自动 
填充 的 目 适 应 布局 。 但 是 ， 由 于 绝 大 多 数 的 触发 BFC 的 属性 目 号 有 一 些 
古怪 的 特性 ， 所 以 ， 实 际 操 作 的 时 候 ， 能 兼顾 流体 特性 和 BFC 特 性 来 实 
现 无 敌 自 适应 布局 的 属性 并 不 多 。 下 面 我 们 一 个 一 个 来 看 ， 每 个 CSS 属 
性 选 一 个 代表 来 进行 说 明 。 














(1) float:1left 。 浮 动 元 素 本 身 BFC 化 ， 然 而 浮动 元 素 有 破坏 性 
和 包 库 性 ， 失 去 了 元 素 本 身 的 流体 自 适 应 性 ， 因 此 ， 无 法 用 来 实现 自动 
填 满 容器 的 自 适 应 布局 。 不 过 ， 其 因 兼 容 性 还 算 展 好 ， 与 搭 积木 这 种 现 
实 认 知 匹 配 ， 上 手 简单 ， 因 此 在 旧时 代 被 大 肆 使 用 ， 也 就 是 常 说 的 “ 浮 
动 布局 "， 也 算 阴 差 阳 错 地 开创 了 自己 的 一 套 布局 。 








(2) position:absolute 。 这 个 脱离 文档 流 有 些 严 重 ， 过 于 清 
高 ， 和 非 定位 元 素 很 难 玩 到 一 块 儿 去 ， 我 就 不 说 什么 了 。 





(3) overflow:hidden 。 这 个 超 棒 ! 不 像 浮 动 和 绝对 定位 ， 玩 得 
有 点 儿 过 。 其 本 身 还 是 一 个 很 普通 的 元 素 ， 因 此 ， 块 状元 素 的 流体 特性 
保存 得 相当 完好 ， 附 上 BFC 的 独立 区 域 特性 ， 可 谓 如 虎 添 辟 、 宇 宙 无 
敌 ! 而 且 overflow:hidden 的 BFC 特 性 从 IE7 浏 览 器 开始 就 支持 ， 兼 容 














性 也 很 不 错 。 唯 一 的 问题 残 是 容器 盒子 外 的 元 素 可 能 会 被 隐藏 挥 ， 一 定 
程度 上 限制 了 这 种 特性 的 大 规模 使 用 。 不 过 ， 溢 出 隐藏 的 交互 场景 比例 
不 算 很 高 ， 所 以 它 还 是 可 以 作为 常用 BFC 布 局 属性 使 用 的 。 





(4) display:inline-block 。 这 是 CSS 世 界 最 伟大 的 声明 之 

一 ， 但 是 用 在 这 里 ， 就 有 些 捉襟见肘 了 。display:inline-block 会 
让 元 素 尺 寸 包 右 收缩 ， 完 全 就 不 是 我 们 想 要 的 block 水 平 的 流动 特性 。 
只 能 是 一 声 叹 恩 舍 茎 掉 ! 然而 ， 峰 回路 转 ， 世 事 难 料 。 大 家 应 该 知道 ， 
IE6 和 IE7 浏 览 器 下 ，block 水 平 的 元 素 设置 display:inline-block 元 
素 还 是 block 水 平 ， 也 就 是 还 是 会 自 适应 容 右 的 可 用 宽度 显示 。 于 是 ， 
对 于 正 6 和 IE7 浏 览 器 ， 我 们 会 阴 差 阳 错 得 到 一 个 比 overflow:hidden 
更 强大 的 声明 ， 既 BFC 特 性 加 身 ， 又 流体 特性 保留 。 














.float-left { 
float: left; 


} 
.bfc-content { 
display: inline-block; 





当然 ，*zoom:1 也 是 类 似 效果 ， 不 过 只 适用 于 低级 的 下 浏览 器 ， 如 
IE7。 


(5) display:table-cell 。 其 让 元 素 表 现 得 像 单元 格 一 样 ，IE8 
及 以 上 版 本 浏览 器 才 支 持 。 跟 display:inline-block 一 样 ， 它 会 跟 
随 内 部 元 素 的 宽度 显示 ， 看 样子 也 是 不 合适 的 命 。 但 是 ， 单 元 格 有 一 个 
非常 神奇 的 特性 ， 就 是 宽度 值 设置 得 再 大 ， 实 际 宽 度 也 不 会 超过 表格 容 
器 的 宽度 。 第 3 章 单元 格 一 柱 擎 天 的 例子 利用 的 束 是 这 种 特性 ， 如 图 6- 








23 上 所 示 。 


当 父 级 relative , 且 | 当 父 级 relative , 且 
帘 度 很 小 的 时 候 ， 例 | 富 度 很 小 的 时 候 ， 例 


如 如 
{position:relative; {position:relative; 
width:20px'} ， width:20px'y ， 
absolute 元 素 也 会 absolute 元 素 也 会 
出 现 一 柱 掌 天 的 出 现 一 柱 掌 天 的 情 
况 ; 况 ; 


潮 吕 小 并 中 和 型 中" 





图 6-23 ”单元 格 中 的 一 柱 擎 天 效果 


因此 ， 如 果 我 们 把 display:table-cell 这 个 BFC 元 素 宽 度 设置 得 
很 大 ， 比 方 说 3666px ， 那 其 实 就 跟 block 水 平 元 素 自动 适应 容器 空间 
效果 一 模 一 样 了 ， 除 非 你 的 容器 宽度 超过 3668px 。 实 际 上 ， 一 般 Web 
页 面 不 会 有 3666px 宽 的 模块 ， 所 以 ， 要 是 实在 不 放心 ， 设 个 9999px 好 
了 1 








.float-left { 
float: left; 


} 


.bfc-content { 
display: table-cell; width: 9999px; 








人 不错。 但 是 ， 还 是 有 两 点 制约 ， 一 是 需要 IE8 及 以 上 
版 本 的 浏览 器 ， 二 是 应 付 连续 英文 字符 换行 有 些 吃 力 。 但 是 ， 总 体 来 
看 ， 其 适用 的 场景 要 比 overflow:hidden 更 为 广泛 。 


(6) display:table-row。 对 width 无 感 ， 无 法 自 适 应 剩余 容器 


和 | 加 
(7) display:table-caption。 此 属性 一 无 是 处 。 


还 有 其 他 声明 对 这 里 的 自 适 应 布局 效 末 而 言 也 都 是 一 无 是 处 ， 殊 不 
全 部 展开 了 。 

总 结 一 下 ， 我 们 对 BFC 声 明 家 族 大 致 过 了 一 再 ， 能 担任 自 适应 布局 
重任 的 也 就 是 以 下 几 个 。 


。 overflow:auto/hidden ， 适 用 于 IE7 及 以 上 版 本 浏览 器 ; 
。display:inline-block ， 适 用 于 IE6 和 IE7; 
。display:table-cell ， 适 用 于 IE8 及 以 上 版 本 浏览 器 。 


最 后 ， 我 们 可 以 提炼 出 两 套 下 7 及 以 上 版 本 浏览 器 适 配 的 自 适 应 解 
决 方案 。 


(1) 借助 overflow 属性 ， 如 下 : 


.lbf-content { overflow: hidden; } 


(2) 融合 display:table-cell 和 display:inline-block ， 如 
再 


.lbf-content { 
display: table-cell; width: 9999px; 
/* 如 果 不 需 要 兼容 IE7， 下 面 样式 可 以 省 略 */ 








*display: inline-block; *width: auto; 











这 两 种 基于 BFC 的 目 适 应 方案 均 文 持 无 限 藤 套 ， 因 此 ， 多 栏目 适应 
可 以 通过 肯 套 方式 实现 。 这 两 种 方案 均 有 一 点 不 足 ， 前 者 如 果子 元 系 要 
定位 到 父 元 素 的 外 面 可 能 会 被 隐藏 ， 后 者 无 法 直接 让 连续 英文 字符 换 
行 。 所 以 ， 大 家 可 以 根据 实际 的 项 目 场景 选择 合适 的 技术 方案 。 











最 后 ， 关 于 display:table-cell 元 素 内 连续 英文 字符 无 法 换行 的 
问题 ， 事 实 上 是 可 以 解决 的 ， 就 是 使 用 类 似 下 面 的 CSS 代 码 : 
.word-break { 


display: table; 
width: 166%; 


table-layout: fixed; 
word-break: break-all; 


} 





6.4 最 佳 结 界 overflow 





要 想 彻 底 清 除 浮动 的 有 影响， 最 适合 的 属性 不 是 clear 而 
是 overflow 。 一 般 使 用 overflow:hidden ， 利 用 BFC 的 “ 结 界 ”特性 彻 
底 解决 浮动 对 外 部 或 兄弟 元 素 的 有 影响。 虽然 有 很 多 其 他 CSS 声 明 也 能 清 
除 浮动 ， 但 基本 上 都 会 让 元 素 的 宽度 表现 为 “ 包 右 性 ”， 也 就 是 会 影响 原 
来 的 样式 布局 ， 而 overflow:hidden 声明 不 会 影响 元 素 原先 的 流体 特 
性 或 宽度 表现 ， 因 此 在 我 看 来 是 最 佳 “ 结 界 ”。 

















不 过 话 又 说 回来 ，overf1low 属性 原本 的 作用 指定 了 块 容器 元 素 的 


内 容 洲 出 时 是 否 需 要 裁剪 ， 也 束 是 “ 结 界 ” 只 是 其 衡 生出 来 的 特性 ，“ 懋 
裁 ? 才 是 其 本 职工 作 。 


6.4.1 _ overflow 剪裁 界线 border box 


一 个 设置 了 overflow:hidden 声明 的 元 素 ， 假 设 同 时 存在 border 
属性 和 padding 属性 ， 类 似 于 下 面 的 CSS 代 码 : 


.box { 
width: 266px; height: 86px; 
padding: 16pX; 


border: 16px solid; 
overflow: hidden; 


} 














则 当 子 元 素 内 容 超 出 容器 宽度 高 度 限 制 的 时 候 ， 剪 裁 的 边界 是 border 
box 的 内 边缘 ， 而 非 padding box 的 内 边缘 ， 如 图 6-24 所 示 。 有 眼见 为 实 ， 
手动 输入 http://demo.cssworld.cn/6/4-1.php 或 者 扫 下 面 的 二 维 码 。 





图 6-24 ”元 素 剪 裁 与 border 内 边缘 


如 末 想 实现 元 素 航 裁 同时 四 周 留 有 间 隐 的 效果 的 话 ， 可 以 试 试 使 用 

透明 边框 ， 此 时 内 间距 padding 属性 是 无 能 为 力 的 。 这 里 举 这 个 实例 并 
不 只 是 为 了 传授 这 个 小 技能 ， 也 是 为 了 以 此 为 契机 ， 深 入 探讨 一 
下 overflow 属性 的 一 个 很 经 典 的 不 兼容 问题 ， 即 Chrome 浏 览 右 下， 如 
果 容 器 可 滚动 (假设 是 垂直 深 动 ) ， 则 padding-bottom 也 算 在 滚动 尺 
寸 之 内 ， 正 和 Firefox 浏 览 器 忽略 padding-bottom 。 例 如 ， 上 面 
的 .box， 我 们 把 overflow 属性 值 改 成 auto ( 亦 可 点 击 实例 页 面 图 
片 ) ， 滚 动 到 底部 会 发 现 ，Chrome 浏 览 器 下 面 是 有 10 像 素 的 空白 的 ， 
如 图 6-25 所 示 。Firefox 和 IE 却 没有 ，Firefox 浏 览 器 呈现 的 效果 如 图 6-26 
所 示 。 





图 6-25 ”Chrome 浏览 器 滚动 高 度 包含 padding-bottom 





图 6-26 ”Firefox 浏 览 器 滚动 高 度 不 包含 padding-bottom 


曾经 有 人 写 邮 件 和 我 交流 过 这 个 问题 ， 认 为 Chrome 浏 览 咒 | 
是 正确 的 ， 下 和 Firefox 浏 览 器 则 是 不 准确 的 。 在 我 看 来 ，Chrome 浏 览 
的 解析 反而 是 不 准确 的 ， 只 是 Chrome 浏 览 器 的 演 染 表现 是 我 们 开发 所 





需要 的 ， 我 们 就 会 偏心 地 认为 Chrome 是 正确 的 。 但 是 ， 正 如 一 开始 的 
例子 所 展示 的 ，overflow 的 鸡 裁 或 者 深 动 的 边界 是 border box 的 内 边 
缘 ， 而 非 padding box 的 内 边缘 ， 因 此 ， 和 忽略 padding-bottom 才 是 符合 
解析 规则 的 泻 染 行为 。 


但 是 事 已 至 此 ， 争 辩 到 底 谁 对 谁 错 其 实 并 没有 多 大 的 意义 ， 重 要 的 
是 我 们 知道 了 这 种 不 兼容 性 ， 所 以 我 们 在 实际 项 目 开 发 的 时 候 ， 要 尽量 
避免 滚动 容器 设置 padding-bottom 值 ， 除 了 样式 表现 不 一 致 外 ， 还 会 
导 仅 scrollHeight 值 不 一 样 ， 这 往往 会 给 开发 带 来 难以 察觉 的 厅 烦 ， 
需要 引起 注意 。 

6.4.2 ”了解 overflow-x 和 overflow-y 
自 IE8 以 上 版 本 的 浏览 器 开始 ，overflow 属性 家 族 增 加 了 两 个 属 


性 ， 就 是 这 里 的 overflow-x 和 overflow-y ， 分 别 表示 单独 控制 水 平 
或 垂直 方向 上 的 剪裁 规则 。 


支持 的 属性 值 和 overflow 属性 一 模 一 样 。 


。Vvisible: 默认 值 。 

。hidden: 剪裁 。 

。 scroll: 滚动 条 区 域 一 直 在 。 

。 auto: 不 足以 深 动 时 没有 深 动 条 ， 可 以 深 动 时 深 动 条 出 现 。 





这 种 相似 性 很 容易 让 大 家 产生 一 个 误区 ， 认 为 只 要 overflow-x 和 
overflow-y 设置 了 上 面 的 属性 值 ， 就 一 定 会 是 这 样 的 表现 ， 实 际 
上 overflow-x 和 overflow-y 的 表现 规则 要 比 看 上 去 复杂 些 : 如 果 





overflow-x 和 overflow-y 属性 中 的 一 个 值 设 置 为 visible 而 另外 一 
个 设置 为 scrol1 、auto 或 hidden ， 则 visible 的 样式 表现 会 如 

同 auto 。 也 就 是 说 ， 除 非 overflow-x 和 overflow-y 的 属性 值 都 

是 visible ， 和 否则 visible 会 当成 auto 来 解析 。 换 名 话说 ， 永 远 不 可 
能 实现 一 个 方 癌 洪 出 剪裁 或 深 动 ， 另 一 方向 内 容 液 出 显示 的 效果 。 


因此 ， 下 面 CSS 代 码 中 的 overflow-y:auto 是 多 余 的 : 


html { 
overflow-x: hidden; 


overflow-y: auto; /* 多 余 */ 


} 





但 是 ，scroll 、auto 和 hidden 这 3 个 属性 值 是 可 以 共存 的 。 
6.4.3 overflow 与 滚动 条 


ee ai 以 产生 滚动 条 的 ， 一 个 是 根 元 素 
<htm1>， 另 一 个 是 文本 域 <textarea> 。 之 所 以 可 以 出 现 滚动 条 ， 
因为 这 两 个 标签 ee ee Jie 
始 ， 都 使 用 auto 作为 默认 的 属性 值 。 这 也 就 意味 着 ， 从 IE8 浏 览 器 开 
台 ， 默 认 状 态 下 是 没有 滚动 栏 的 ， 尺 寸 溢出 才 会 出 现 ， 对 于 下 7 浏览 
器 ， 其 样式 表现 就 好 像 设 置 了 overflow-y:scroll 一 般 。 














关于 浏览 器 的 深 动 条， 有 以 下 几 个 小 而 美的 结论 。 


(1) 在 PC 端 ， 无 论 是 什么 浏览 器 ， 默 认 深 动 条 均 来 自 <html>， 
而 不 是 <body> 标签 。 验 证 很 简单 ， 新 建 一 个 空白 页 面 ， 此 时 <bodyy> 标 
签 的 默认 margin 值 是 .5em ， 如 果 滚 动 条 是 由 <body> 标签 产生 的 ， 那 





么 效果 应 该 如 图 6-27 所 示 这 般 边 缘 留 有 间 际 。 但 是 最 后 实现 结果 却 是 图 
6-28 所 示 的 这 样 没有 间 际 。 


图 6-27 “bodyy> 产生 滚动 条 的 假想 效果 





图 6-28 ”实际 效果 无 间隙 ， 滚 动 条 由 <htm1> 产生 





所 以 ， 如 采 我 们 想 要 去 除 页 面 默认 滚动 条 ， 只 需要 : 


html { overflow: hidden; } 


而 没 必要 把 cbody> 也 拉 下 水 : 





html, body 


{ overflow: hidden; } 


[L 


注意 ， 上 述 规则 只 对 PC 端 有 效 ， 对 于 移动 端 并 不 一 定 适 用 。 例 
如 ， 在 PC 端 ， 对 <html> 标签 设置 overflow:hidden 可 以 隐藏 滚动 条 
禁止 滚动 ， 但 是 在 移动 端 基 本 上 无 效 。 在 PC 端 ， 窗 体 滚动 高 度 可 以 使 
用 document.documentElement.scrollTop 获取 ， 但 是 在 移动 端 ， 可 
能 就 要 使 用 document .body.scrollTop 获取 。 











(2) 滚动 条 会 占用 容器 的 可 用 宽度 或 高 度 。 假 设 一 个 元 素 的 宽度 
是 469px ，CSS 代 码 如 下 : 


.box { 
width: 4660px; height: 166pX; 


overflow: auto; 


} 





当 子 元 又 高 度 超过 166px 出 现 深 动 条 的 时 候 ， 子 元 素 可 用 的 实际 宽度 实 
际 上 要 小 于 466px ， 因 为 滚动 条 (准确 地 说 应 该 是 深 动 栏 ， 占 据 了 一 定 
的 宽度 。 当 然 这 还 要 看 操作 系统 ， 比 方 说 在 移动 端 就 不 会 有 这 样 的 问 
题 ， 因 为 移动 端的 屏幕 尺寸 本 身 就 有 限 ， 滚 动 条 一 般 都 是 悬浮 模式 ， 不 
会 占据 可 用 宽度 ， 但 是 在 PC 端 ， 尤 其 Windows 操 作 系 统 下 ， 几 乎 所 有 浏 
览 器 的 滚动 栏 都 会 占据 宽度 ， 而 且 这 个 宽度 大 小 是 固定 的 。 我 通过 在 
Windows 7 系统 下 的 测试 和 对 比 发 现 ，IE7 及 以 上 版 本 正 、Chrome、 
Firefox 浏 览 器 滚动 栏 所 占据 的 宽度 均 是 17px ， 注 意 ， 很 精准 的 是 17px 
， 我 不 知道 网 上 那些 误 人 子弟 的 28px 、14px 是 从 哪里 来 的 。 当 然 ， 随 
着 以 后 操作 系统 的 升级 ， 深 动 栏 的 宽度 发 生变 化 也 是 有 可 能 的 。 











要 知道 自己 浏览 器 的 滚动 栏 宽度 是 多 少 其 实 很 简单 ， 代 码 如 下 : 


.box { width: 466px; overflow: scroll; } 
<div class="box"> 
<div id="in" class="in"></div> 


</div> 
console.1og(466 - document.getElementById("in").clientWidth); 





这 种 深 动 栏 占据 宽度 的 特性 有 时 候 会 给 我 们 的 布局 带 来 不 小 的 有 奈 
烦 。 比 方 说 ， 布 局 直接 错位 ， 如 宽度 设 定 死 的 浮动 布局 ; 叉 或 者 布局 不 
对 齐 ， 如 我 们 和 希望 实现 一 个 表格 头 固 定 、 表 格 主体 可 以 滚动 的 效果 ， 御 
见 的 实现 方法 是 使 用 双 <table> ， 表 格 头 是 一 个 独立 的 <table> ， 主 体 
也 是 一 个 独立 的 <table> 元 素 ， 放 在 一 个 overflow:auto 的 <div> 元 
素 中 ， 这 种 实现 ， 如 果 深 动 条 不 出 现 还 好 ， 两 个 表格 的 表格 列 可 以 完美 
对 齐 ， 但 是 一 旦 滚动 条 出 现 ， 主 题 表 格 可 用 宽度 被 压缩 ， 表 格 列 往往 就 
无 法 完美 对 齐 了 。 














常用 的 解决 方法 有 下 面 两 种 : 一 种 是 <table> 元 素 使 用 固定 的 宽度 
值 ， 但 是 距离 右 侧 留 有 17px 的 间 阶 ， 这 样 即使 滚动 条 出 现 ， 也 不 会 产 
生 任 何 的 宽度 影响 ， 必 一 种 束 是 表格 的 最 后 一 列 不 设 定 宽 度 《〈 文 字 最 好 
左 对 齐 ) ， 前 面 每 一 列 都 定 死 宽度 ， 这 样 最 后 一 列 就 是 目 适 应 结构 ， 束 
算 滚动 条 出 现 ， 也 只 是 自身 有 一 些 宽度 变 小 ， 对 整体 对 齐 并 无 多 大 影 
啊 。 














然而 ， 滚 动 栏 占据 宽度 的 特性 最 大 的 问题 就 是 页 面 加 载 的 时 候 水 平 
大 中 的 布局 可 能 会 产生 网 动 ， 因 为 窗 体 默认 是 没有 深 动 条 的 ， 而 HTML 
内 容 是 自 上 而 下 加 载 的 ， 就 会 发 生 一 开始 没有 深 动 条 ， 后 来 突然 出 现 深 
动 条 的 情况 ， 此 时 页 面 的 可 用 宽度 发 生变 化 ， 水 平 居中 重新 计算 ， 导 致 
页 面 发 生 昂 动 ， 这 个 体验 是 非常 不 好 的 。 比 较 简单 的 做 法 是 设置 如 下 
CSS: 





html { 
overflow-y: scroll; 


} 





如 果 页 面 注 定 会 很 高 ， 这 种 做 法 也 是 可 以 接受 的 ， 但 是 如 果 是 404 
页 面 这 种 不 足 一 屏 高 度 的 页 面 ， 右 侧 也 依然 有 个 滚动 栏 ， 那 就 有 种 回 到 
解放 前 的 感觉 





这 里 分 享 一 个 可 以 让 页 面 滚动 条 不 发 生 晃 动 的 小 技巧 ， 即 使 用 如 下 
CSS 代 码 : 


html { 

overflow-y: scroll; /* for IE8 */ 
} 
:root { 

overflow-y: auto; 

overflow-x: hidden; 


} 
:root body { 
position: absolute; 


} 

body { 
width: 166vw; 
overflow: hidden; 


} 








基本 上 药 到 病 除 ， 而 且 后 遗 症 非常 少 ， 大 家 不 妨 试 试 ! 


深 动 条 是 可 以 自 定义 的 。 因 为 下 浏览 费 的 自 定义 效果 实在 是 比 原生 
的 还 要 难看 ， 束 不 浪费 大 家 时 间 了 ， 就 此 打住 。 


倒是 支持 -webkit- 前 级 的 浏览 器 可 以 说 说 。 例 如 ， 对 于 Chrome 浏 
览 嚣 : 


。 整体 部 分 ，::-webkit-scrollbar:; 

。 两 端 按 钮 ，::-webkit-scrollbar-button; 

。 外 层 轨道 ，::-webkit-scrollbar-track; 

。 内 层 轨 道 ，::-webkit-scrollbar-track-piece; 
滚动 滑 块 ，::-webkit-scrollbar-thumb; 


次 
e。 边 角 ，::-webkit-scrollbar-corner。 





但 是 我 们 平时 开发 中 只 用 下 面 3 个 属性 : 


::-webkit-scrollbar { 血 槽 宽度 
width: 8px; height: 人 


::-webkit-scrollbar-thumb { /* 拖 动 条 */ 
background-color: rgba(08,06,0, .3); 
border-radius: 6px; 


::-webkit-scrollbar-track { /* 背景 模 */ 
background-color: #ddd; 
border-radius: 6px; 


} 





在 目标 浏览 器 下 的 滚动 条 效果 就 会 如 图 6-29 所 示 这 般 。 





图 6-29 自 定 义 滚 动 条 效果 示意 


6.4.4 依赖 overflow 的 样式 表现 
在 CSS 世 界 中 ， 很 多 属性 要 想 生 效 都 必须 要 有 其 他 CSS 属 性 配合 


其 中 有 一 种 效果 就 离 不 开 overflow:hidden 声明 ， 即 单行 文字 溢出 点 


点 点 效果 。 虽 然 效果 的 核心 是 text- overflow:ellipsis ， 效 果实 现 
必需 的 3 个 声明 如 下 : 


.ell { 
text-overflow: ellipsis; 
white-space: nowrap; 


overflow: hidden; 


} 





这 3 个 声明 缺 一 不 可 。 


目前 ， 对 -webkit- 私有 前 弘文 持 民 好 的 浏览 器 还 可 以 实现 多 行文 
字 打 点 效果 ， 但 是 却 无 须 依 赖 overflow:hidden 。 比 方 说 ， 最 多 显示 2 
行内 容 ， 再 多 就 打点 的 核心 CSS 代 码 如 下 : 





.ell-rows-2 { 
display: -webkit-box; 
-webkit-box-orient: vertical; 


-webkit-line-clamp: 2; 





6.4.5 ” overflow 与 销 点 定位 


锚 点 ， 通 俗 点 的 解释 就 是 可 以 让 页 面 定位 到 某 个 位 置 的 点 。 其 在 高 
度 较 高 的 页 面 中 经 常见 到 ， 如 百度 百科 页 面 中 标题 条 目的 快速 定位 效 
果 ， 如 图 6-30 所 示 。 点 击 其 中 任意 一 个 标题 链接 ， 比 如 说 发展 历程 ”， 
页 面 就 会 快速 定位 到 “发 展 历程 ”这 一 块 内容 ， 同 时 地 址 栏 中 的 URL 地 址 
最 后 多 了 一 个 #1 ， 如 图 6-31 所 示 。 

















1 友 展 历程 5 语言 基础 
目录 ) 编程 开发 屋 性 和 尾 性 值 
选择 器 
3 语言 特点 a 
6 语言 标准 
4 工作 原理 


图 6-30 ”百科 中 的 目录 标题 链接 条 目 


一 C 1O item/CSS/545 丰 1 
由 发 展 历程 





图 6-31 ”定位 效果 与 URL 地 址 变化 


我 所 知道 的 基于 URL 地 址 的 鳃 链 (如 上 面 的 #1 ， 可 以 使 
用 location.hash 获取 ) 实现 锚 点 跳 转 的 方法 有 两 种 ， 一 种 是 ca> 标 
签 以 及 name 属性 ， 还 有 一 种 就 是 使 用 标签 的 id 属性 。 百 度 百 科 就 是 使 
用 <ay> 标签 的 name 属性 实现 锚 点 跳 转 的 ， 其 代码 如 图 6-32 所 示 。 


vdiv class="anchor-list 
[a name="1"]class lemma-anchor para-title 
a Name="subS5236733_1” class="lemma-anchor 
a name=" 发 展 历 程 ”class="lemma-anchor 
div 


a 
a 


a 


图 6-32 使 用 <a> 标签 以 及 name 值 实现 销 点 定位 





使 用 更 精练 的 代码 表示 就 是 : 


<a href="#1"> 发 展 历 程 ></a> 


<a name="1"></a> 





就 我 个 人 而 言 ， 我 更 喜欢 使 用 下 面 的 做 法 ， 也 就 是 利用 标签 的 id 
属性 ， 因 为 HTML 会 显得 更 干净 一 些 ， 也 不 存在 任何 兼容 性 问题 : 





<a href="#1"> 发 展 历 程 ></a> 





<h2 id="1"> 发 展 历程 </h2> 








下 面 思考 这 两 个 问题 : 锁 点 定位 行为 是 基于 什么 条 件 触发 的 ? 锚 点 
定位 作用 的 发 生 本 质 上 是 什么 在 起 作用 ? 


1. 匀 点 定位 行为 的 触发 条 件 
下 面 两 种 情况 可 以 触发 锚 点 定位 行为 的 有 发生 : 











(1) URL 地 址 中 的 锚 链 与 锚 点 元 素 对 应 并 有 交互 行为 ; 
(2) 可 focus 的 销 点 元 素 处 于 focus 状 态 。 


上 面 百度 百科 的 例子 就 是 基于 URL 地 址 的 销 链 与 锚 点 实现 的 ， 定 位 
效果 的 发 生 需 要 行为 触发 。 比 方 说 ， 点 击 一 个 链接 ， 改 变 地 址 栏 的 锚 链 
值 ， 或 者 新 打开 一 个 链接 ， 后 面 珊 有 一 个 锚 链 值 ， 当 然 前 提 是 这 个 锚 链 
值 可 以 找到 页 面 中 对 应 的 元 素 ， 并 且 是 非 隐藏 状态 ， 否 则 不 会 有 任何 的 
定位 行为 友 生 。 如 果 我 们 的 销 链 就 是 一 个 很 简单 的 # ， 则 定位 行为 发 生 
的 时 候 ， 页 面 是 定位 到 顶部 的 ， 所 以 我 们 一 般 实 现 返回 顶部 效果 都 是 使 
用 这 样 的 HTML: 


<a href="#"> 返 回 顶部 ></a> 


然后 配合 JavaScript 实 现 一 些 动 效 或 者 避免 点 击 时 候 URL 地 址 出 现 # ， 而 
很 多 人 实现 返回 顶部 效果 的 时 候 使 用 的 是 类 似 下 面 的 HTML: 











<a href="javascript:"> 返 回 顶部 ></a> 





然后 使 用 JavaScript 实 现 定位 或 者 加 一 些 平滑 动 效 之 类 。 显 然 我 是 推荐 上 
面 那 种 做 法 的 ， 因 为 销 点 定位 行为 的 发 生 古 不 需要 依赖 JavaScript 的 ， 所 
以 即使 页 面 JavaScript 代 码 失 效 或 者 加 载 缓慢 ， 也 不 会 影响 正常 的 功能 体 
验 ， 也 就 是 用 户 无 论 在 什么 状态 下 都 能 准确 地 返回 项 部 。 


“focus 销 点 定位 ” 指 的 是 类 似 链接 或 者 按钮 、 输 入 框 等 可 以 被 
focus 的 元 素 在 被 focus 时 发 生 的 页 面 重 定位 现象 。 


举 个 很 简单 的 例子 ， 在 PC 端 ， 我 们 使 用 Tab 快 速 定位 可 focus 的 元 
素 的 时 候 ， 如 果 我 们 的 元 素 正 好 在 屏幕 之 外 ， 浏 览 器 就 会 自动 重 定位 ， 
将 这 个 屏幕 之 外 的 元 素 定 位 到 屏幕 之 中 。 再 举 一 个 例子 ， 一 个 可 读 写 的 
<input> 输入 框 在 屏幕 之 外 ， 则 执行 类 似 下 面 的 JavaScript 代 码 的 时 
候 : 


document .querySelector( ' input').focus() 


这 个 输入 框 会 目 动 定 位 在 屏幕 之 中 ， 这 些 就 是 “focus 销 皮 定位 ”。 


























同样 , “focus 锚 点 定位 ”也 不 依赖 于 JavaScript， 是 浏览 器 内 置 的 无 
障碍 访问 行为 ， 并 且 所 有 浏览 器 都 是 如 此 。 


虽然 都 是 锚 点 定位 ， 但 是 这 两 种 定位 方法 的 行为 表现 还 是 有 差异 
的 ，“URL 地 址 锁链 定位 ”是 让 元 素 定 位 在 浏览 器 窗 体 的 上 边缘 ， 
而 “focus 锚 点 定位 ?是 让 元 素 在 浏览 器 窗 体 范 围 内 显示 即 可 ， 不 一 
在 上 边缘 。 





2.， 锚 点 定位 作用 的 本 质 


锚 点 定位 行为 的 发 生 ， 本 质 上 是 通过 改变 容器 深 动 高 度 或 者 宽度 来 
实现 的 。 由 于 平时 大 多 数 页 面部 是 垂直 深 动 ， 且 水 平 深 动 与 之 类 似 ， 
此 接 下 来 的 内 容 我 都 是 以 垂直 滚动 示意 。 








注意 ， 这 里 说 的 是 容器 的 滚动 高 度 ， 而 不 是 浏览 器 的 滚动 高 度 ， 这 
一 点 小 小 区 分 非常 重要 。 没 错 ， 非 常 重要 。 由 于 我 们 平常 接触 锚 点 定位 
都 是 浏览 器 窗 体 滚动 条 级 别 的 ， 因 此 很 容易 被 一 些 表 象 迷惑 而 产生 一 些 
错误 的 认识 。 


首先 ， 锚 点 定位 也 可 以 发 生 在 普通 的 容器 元 素 上 ， 而 且 定 位 行为 的 
发 生 是 由 内 而 外 的 。 什 么 意思 呢 ? 例如 ， 我 们 的 页 面 上 有 一 个 <divy> 元 
素 设置 了 overflow:auto ， 且 子 元 素 高 度 超出 其 目 喘 高 度 限 制 ， 代 人 码 
示意 CSS 和 HTML 如 下 : 





.box { 
height: 126pX; 
border: 1px solid #bbb; 
overflow: auto; 


} 
.Content { 
height: 266pX; 


background-color: #eee; 


<div class="box"> 

<div class="content"></div> 

<h4 id="title"> 底 部 标题 </h4> 
</div> 
<p><a href="#title"> 点 击 测试 </a></p> 








由 于 .content 元 素 高 度 超过 .box 容器 ， 因 此 <h4> 元 素 必然 不 可 
见 ， 如 图 6-33 所 示 。 然 后 ， 我 们 点 击 下 面 的 “点 击 测试 链接 ， 则 滚动 条 
位 置 变 化 (实际 上 改变 了 scrollTop 值 ) ,“ 底 部 标题 > 自动 出 现 了 ， 如 


图 6-34 所 示 。 


点 十 测试 


图 6-33 ”标题 不 可 见 示 意 


底部 标题 
点 十 测试 


图 6-34 ”标题 可 见 示 意 


“由 内 而 外 ” 指 的 是 ， 普 通 元 素 和 窗 体 同时 可 深 动 的 时 候 ， 会 由 内 而 
外 触发 所 有 可 滚动 窗 体 的 锚 点 定位 行为 。 继 续 上 面 的 例子 ， 假 设 我 们 的 
浏览 器 窗 体 也 是 可 滚动 的 ， 则 点 击 “ 点 击 测试 "链接 后 , “底部 标题 ” 先 触 
发 .box 容器 的 锚 点 定位 ， 也 就 是 滚动 到 底部 ， 然 后 再 触发 窗 体 的 销 点 
定位 ，“ 底 部 标题 "和 浏览 器 窗口 的 上 边缘 对 齐 ， 如 图 6-35 所 示 (图 中 最 
上 方 一 条 线 就 是 浏览 器 窗 体 上 边缘) 。 





话 部 标题 


占 圭 : 刚 读 





图 6-35 ”标题 可 见 触发 两 个 可 滚动 容器 锚 点 定位 示意 





其 次 就 是 设置 了 overflow:hidden 的 元 素 也 是 可 滚动 的 ， 这 也 是 
本 小 市 的 核心 。 说 得 更 干脆 点 儿 就 是 : overflow:hidden 跟 
overflow:auto 和 overflow: scroll 的 差别 就 在 于 有 没有 那个 滚动 
条 。 元 素 设置 了 overflow:hidden 声明 ， 里 面 内 容 高 度 溢出 的 时 候 ， 
滚动 依然 存在 ， 仅 仅 滚 动 条 不 存在 ! 














有 人 肯定 会 有 反驳: 不 会 呀 ， 元 素 设 置 了 overflow:hidden ， 同 时 
高 度 溢出 ， 我 的 鼠标 无 论 怎 么 滚 ， 都 没有 滚动 行为 发 生 啊 ! 





对 ， 你 说 的 那 是 表现 ， 表 面 看 起 来 确实 是 那样 ， 但 是 如 果 发 生 销 点 
定位 ， 你 就 会 发 现 滚 动 发 生 了 。 还 是 上 面 的 例子 ， 假 设 .box 元 素 的 
CSS 变 成 下 面 这 样 ，overflow 属性 值 不 是 auto ， 而 是 hidden : 








.box { 
height: 126pX; 


border: 1px solid #bbb; 
overflow: hidden; 





我 们 点 击 下 面 的 “点 击 测试 ”链接 时 ， 标 题 同样 发 生 了 重 定 位 ， 如 图 
6-36 所 示 。 


底部 标题 
点 十 测试 


图 6-36 overflow:hidden 依然 锚 点 重 定位 





锚 点 定位 本 质 上 是 改变 了 scrollTop 或 scrollLeft 值 ， 因 此 ， 上 





面 的 定位 效果 等 同 于 执行 了 下 面 的 JavaScript 代 码 : 




















document.querySelector('.box').scrollTop = 266;  // 随便 一 个 足够 大 的 值 即 可 








什么 ? 浏览 器 的 锚 点 定位 实现 了 类 似 JavaScript 的 效 末 ? 那 包 不 是 我 
们 可 以 利用 这 种 兼容 的 浏览 器 行为 实现 更 复杂 的 无 JavaScript 的 交互 效 
果 ? 例如 ， 实 现 选项 卡 切换 效果 ， 手 动 输入 http://demo.cssworld.cn/6/4- 
2.php 或 者 扫 下 面 的 二 维 码 。 这 个 示例 是 基于 URL 地 址 的 销 链 触发 销 点 
定位 实现 的 选项 卡 切换 效果 。 例 如 ， 点 击 切换 按钮 3 ， 效 果 如 图 6-37 所 
Ts 





3 
vo 








图 6-37 ”选项 卡 3 选 中 效果 
HTML 和 核心 CSS 代 码 如 下 : 


<div class="box"> 
<div class="list" id="one">1</div> 
<div class="list" id="two">2</div> 
<div class="list" id="three">3</divy> 
<div class="list" id="four">4</div> 
</div> 
<div class="link"> 
<a href="#one">1</a> 
<a href="#two" >2</a> 
<a href="#three">3</a> 
<a href="#four">4</a> 
</div> 
.box { 
height: 16em; 
border: 1px solid #ddd; 
overflow: hidden; 


} 

.list { 
line-height: 16em; 
background: #ddd; 





容器 设置 了 overflow:hidden ， 且 每 个 列表 高 度 和 容器 的 高 度 一 
样 高 ， 这 样 保 证 永远 只 显示 一 个 列表 。 当 我 们 点 击 按钮 ， 如 第 三 个 按 
钮 ， 会 改变 URL 地 址 的 销 链 为 #three ， 从 而 触发 id 为 three 的 第 三 个 
列表 发 生 的 锚 点 定位 ， 也 就 是 改变 容器 滚动 高 度 让 列表 3 的 上 边缘 和 滚 
动容 器 上 边缘 对 齐 ， 从 而 实现 选项 卡 效 果 。 我 自己 画 了 个 简单 的 原理 
图 ， 如 图 6-38 所 示 。 





Qa 被 共 hree 锚 定 


\ @ 改变 滚动 高 度 
之 触 上 友 锚 点 定位 





图 6-38 ” 锚 点 定位 实现 选项 卡 原理 示意 


此 效果 乍 一 看 很 酷 ， ee 其 一 ， 容 器 遍 度 需要 回 
定 ; 其 二 ， 也 是 最 抹 烦 的 ， 就 是 “由 内 而 外 ”的 销 扣 定位 会 触 友 窗 体 的 重 
定位 ， 也 就 是 说 ， 如 果 页 面 也 是 可 以 深 动 的 ， 则 点 击 选项 卡 按 钮 后 页 面 
会 发 生 跳动 ， 这 种 体验 显然 是 非常 不 好 的 。 那 有 没有 什么 解决 办 法 呢 ? 








有 ， 还 记 不 记得 前 面 提 过 有 两 种 方法 可 以 触发 锚 点 定位 ， 其 中 有 一 
种 方法 就 是 “focus 锚 点 定位 *”， 只 要 定位 的 元 素 在 浏览 右 窗 体 中 ， 束 不 
会 触发 窗 体 的 滚动 ， 也 就 是 选项 卡 切换 的 时 候 页 面 不 会 发 生 跳动 。 


访问 基于 “focus 销 点 定位 ”实现 的 无 JavaScript 选 项 卡 切换 效果 实例 
页 面 ， 手 动 输入 http:/demo.cssworld.cn/6/4-3.php 或 者 扫 下 面 的 二 维 码 。 


点 击 切 换 按 钮 3 ， 效 果 如 图 6-39 所 示 。 











图 6-39 ”选项 卡 3 选 中 效果 








可 以 发 现 ， 就 算 页 面 窗 体 就 有 滚动 条 ， 绝 大 多 数 情 况 下 ， 也 都 不 会 
发 生 跳动 现象 ，HTML 和 核心 CSS 代 码 如 下 : 





<div class="box"> 
<div class="list"><input id="one">1</div> 
<div class="list"><input id="two">2</div> 
<div class="list"><input id="three">3</div> 
<div class="list"><input id="four">4</div> 

</div> 

<div class="link"> 
<label class="click" for="one">1</label> 
<label class="click" for="two">2</label> 


<label class="click" for="three">3</label> 
<label class="click" for="four">4<¢/1label> 
</div> 
.box { 
height: 16em; 
border: 1px solid #ddd; 
overflow: hidden; 


} 
.list { 
height: 1662%; 
background: #ddd; 
position: relative; 
} 
.list > input { 
position: absolute; top:@; 
height: 166%; width: 1px; 
border:6; padding: 6; margin: ©; 
clip: rect(6 60 9 0); 
} 





原理 其 实 很 简单 ， 就 是 在 每 个 列表 里 塞 入 一 个 肉眼 看 不 见 的 
<input> 输入 框 ， 然 后 选项 卡 按钮 变 成 <label> 元 素 ， 并 通过 for 属性 
与 <input> 输入 框 的 id 相关 联 ， 这 样 ， 点 击 选 项 按钮 会 触 友 输 入 框 的 
focus 行为 ， 触 及 销 点 定位 ， 实 现 选项 卡 切换 效果 。 


这 种 原理 实现 的 选项 卡 还 有 一 个 优点 丈 是 ， 我 们 可 以 直接 使 用 Tab 
键 来 切换 、 浏 览 各 个 选项 面板 的 内 容 ， 传 统 的 选项 卡 实 现 并 没有 如 此 便 
捷 的 可 访问 性 。 








然而 ， 上 面 这 种 技术 要 想 用 在 实际 项 目 中 还 离 不 开 JavaScript 的 文 
持 ， 一 个 是 选项 卡 按 钮 的 选中 效果 ， 另 一 个 就 是 处 理 列表 部 分 区 域 在 浏 
览 器 外 面 时 依然 会 跳动 的 问题 。 相 关 处 理 类 似 下 面 的 做 法 ， 即 使 用 
jQuery 语法 ，: 





$('label.click').removeAttr('for').on('click', function() { 


$('.box').scrollTop(xxx); 'xxx' 表示 深 动 数值 





于 是 ， 束 算 JavaScript 出 现 腊 曾 或 者 加 载 缓 慢 ， 选 项 卡 点 击 功 能 依然 
正常 ， 并 且 下 接 用 Tab 键 浏览 选项 卡 内 容 的 超级 便捷 的 可 访问 性 也 保留 
下 来 了 。 综 合 来 看 ， 这 是 非常 不 错 的 一 种 选项 卡 实现 技巧 ， 这 种 技巧 实 
际 上 是 我 目 己 私 藏 的 专利 小 技术 ， 这 里 首次 公开 。 





同样 ， 这 一 抠 术 只 运用 于 高 度 固 定 的 选项 卡 效 果 ， 如 各 大 站 点 首页 
经 党 出 现 的 约 灯 片 广告 切换 效果 等 。 


实际 上 ， 如 果 不 用 考虑 正 8 浏 览 器 ， 可 以 利用 :checked 伪 类 、 单 选 
按钮 和 <label> 标签 的 点 击 行为 实现 选项 卡 切换 ， 由 于 本 书 知识 点 面 问 
IE8 及 以 上 版 本 的 浏览 器 ， 因 此 这 一 技术 不 做 详细 介绍 。 


知道 overflow:hidden 元 素 依然 可 以 滚动， 除了 可 以 帮助 我 们 实 
现 无 JavaScript 的 选项 卡 效果 外 ， 还 可 以 帮助 我 们 理解 一 些 现象 发 生 的 原 
因 。 例 如 ， 我 之 前 提 到 过 的 使 用 margin- bottom 负 值 加 padding- 
bottom 正 值 以 及 父 元 素 overflow:hidden 配合 实现 的 等 高 布局 ， 在 大 
多 数 情 况 下 ， 这 种 布局 使 用 是 没有 任何 问题 的 ， 但 是 如 果 使 
用 dom.scrollIntoView() 或 者 触发 窗 体 视 区 范围 之 外 的 内 部 元 素 的 
锚 点 定位 行为 ， 布 局 就 会 飞 掉 ， 没 错 ， 布 局 就 像 长 了 翅膀 一 样 飞 掉 了 。 
因为 ， 此 时 容器 的 scrollHeight 〈 视 区 高 度 + 可 滚动 高 度 ) 要 远 远 大 
于 clientHeight 〈 视 区 高 度 ) ， 而 销 点 定位 的 本 质 就 是 改变 容器 的 深 
动 高 度 ， 因 此 ， 容 器 的 深 动 高 度 不 是 8 ， 发 生 了 与 上 面 无 JavaScript 的 选 
项 卡 类 似 的 效果 ， 产 生 布 局 问题 。 














就 我 自己 的 切身 体会 而 言 ， 时 刻 牢 记 overflow:hidden 元 素 依然 
可 以 滚动 这 一 点 ， 可 以 让 我 们 以 更 简单 、 更 原生 的 方式 实现 一 些 交 互 效 
果 。 举 个 例子 ， 实 现 自 定 义 的 滚动 条 效果 ， 因 为 Windows 系 统 下 浏览 器 
的 滚动 条 会 占据 宽度 ， 而 且 长 得 不 好 看 ， 所 以 就 存在 实现 自 定 义 滚动 条 
的 需求 ， 也 就 是 类 似 移动 端的 悬浮 式 滚 动 条 。 








传统 实现 都 是 父 容器 设置 overflow:hidden ， 然 后 子 元 素 使 用 一 
个 大 的 <div> 包 起 来 ， 设 置 绝 对 定位 ， 然 后 通过 改变 top 值 ， 或 者 使 
用 transform 进行 偏 移 。 








但 是 在 我 看 来 ， 最 推荐 的 实现 还 是 基于 父 容 器 目 壬 的 scrollTop 值 
改变 来 实现 目 定 义 深 动 条 效果 ， 其 好 处 有 如 下 这 些 。 





(1) 实现 简单 ， 无 须 做 边界 判断 。 因 为 就 算 scrollTop 设 为 -999 
， 浏 览 器 依然 按照 8 来 泻 染 ， 要 想 滚动 到 底部 ， 直 接 一 个 很 大 的 
scrollTop 值 就 可 以 了 ， 无 须 任何 计算 。 例 如 : 


container.scrollTop = 99999; 


列表 深 动 了 多 少 直 接 就 是 scrollTop 值 ， 实 时 获取 ， 天 然 存 储 。 传 
统 实现 要 变量 以 及 边界 更 新 ， 很 咖 嗪 。 











(2) 可 与 原生 的 scrol1l 事件 天 然 集成 ， 无 颖 对 接 。 例 如 ， 我 们 了 
滚动 延迟 加 载 图 片 效果 就 可 以 直接 应 用 ， 因 为 图 片 位 置 的 计算 往往 都 是 
和 scrollTop 值 相 关联 的 ， 所 以 传统 实现 scrollTop 值 一 直 是 8 ， 很 可 
能 导致 这 类 组 件 出 现 异常 。 





(3) 无 须 改 变 子 元 素 的 结构 。 传 统 实现 为 了 定位 方便 ， 会 给 所 有 
的 列表 元 素 外 面包 一 层 独立 的 <div> 元 素 ， 这 可 能 会 导致 某 些 选择 器 
(类 似 于 .container > .List{}y) 失效 ， 但 是 ， 基 于 父 容器 本 身 的 
scrollTop 滚动 实现 则 无 此 问题 ， 即 使 子 元 素 全 是 兄 第 元 素 也 是 可 以 
的 。 








当然 ， 没 有 哪 种 技术 是 万 能 的 ， 基 于 改变 overflow:hidden 父 容 
器 的 scrollTop 实现 自 定义 滚动 条 效果 也 有 几 点 不 足 : 一 是 无 法 添加 类 
似 Bounce 回 弹 这 种 动 效 ， 二 是 泻 染 要 比 一 般 的 泻 染 慢 一 些 ， 但 大 多 数 
场景 下 用 户 都 是 无 感知 的 。 








大 家 可 根据 自己 项 目的 实际 情况 自行 取舍 ， 选 择 合适 的 技术 。 
6.5 float 的 见 贡 position:absolute 


我 一 直 认 为 position:absolute (下 简称 absolute ) 和 
float:left/float: right (下 简称 float ) 是 兄弟 关系 ， 都 兼 
具 “ 块 状 化 “ 包 于 性 ”破坏 性 ”等 特性 ， 不 少 布局 场合 甚至 可 以 相互 蔡 
代 。 有 人 可 能 会 疑惑 ， 一 个 属性 名 是 position， 一 个 是 float 
;“ 姓 ”都 不 一 样 ， 还 兄弟 呢 ? 





实际 上 是 这 样 的 ，absolute 和 float 可 以 看 作 是 “ 同 父 异 母 ”的 兄 
弟 关 系 。 它 们 的 父亲 是 同一 个 人 ， 是 CSS 世 界 的 大 魔王 ， 属 于 魔界 ; 但 
母亲 不 是 一 个 人 ，absolute 的 母亲 来 自 魔 界 ， 而 float 的 母亲 来 自 人 
i 


但 是 ，absolute 从 不 承认 它 有 一 个 半 魔 半 人 的 兄弟 float ， 两 人 
是 水 火 不 容 。 由 于 absolute 血脉 更 纯 ， 能 力 更 霸道 ， 因 此 ， 
当 absolute 和 float 同时 存在 的 时 候 ，float 属性 是 无 任何 效果 的 。 
因此 ， 没 有 任何 理由 absolute 和 float 同时 使 用 : 











.brother { 
position: absolute; 
float: left; // 无 效 


} 





虽然 嘴 上 不 承认 ， 但 事实 摆 在 那里 ， 毕 竟 有 那么 多 共性 ， 这 兄弟 关 
系 是 跑 不 了 了 。 


例如 ,“ 抉 状 化 ”和 浮动 类 似 ， 元 素 一 旦 position 属性 值 
为 absolute 或 fixed ， 其 display 计算 值 就 是 block 或 者 table 。 例 
如 ，<span> 元 素 默 认 是 inline 水 平 ， 但 是 一 旦 设 
置 position:absolute ， 其 display 计算 值 就 变 成 了 block ， 我 们 可 
以 使 用 简单 的 JavaScript 代 码 验证 上 面 的 观点 。 打 开 浏 览 器 控制 台 ， 输 入 
如 下 JavaScript 代 码 : 


var span = document.createElement('span'); 

document .body .appendChild(span); 

console.log('1. ' + Wwindow.getComputedStyle(span).display); 
// 设置 元 素 绝对 定位 





span.style.position = 'absolute'; 
console.log('2. ' + Window.getComputedStyle(span).display); 





执行 后 的 结果 如 图 6-40 所 示 。 


var span = document.createELIement( "span' ) 
document .body .appendChild(span); 
console.log('1. "+ 
Window.getComputedStyle(span).display); 


ShonssiVie ROSE = "absolute'; 
cons ole.1log( es 
indow Sb na e(span).display); 
1. inline VM94:3 
2. block VM94:5 


图 6-40 ”绝对 定位 让 元 素 块 状 化 


又 比方 说 “破坏 性 ”， 指 的 是 破坏 正常 的 流 特 性 。 和 float a 虽 
然 absolute 破坏 正常 的 流 来 实现 自己 的 特性 表现 ， 但 本 身 还 是 受 普通 
的 流体 元 素 布局 、 位 置 甚至 一 些 内 联 相 关 的 CSS 属 性 影响 的 ，i ee 
容 会 在 6.5.2 节 介绍 














又 比方 说 两 者 部 能 “ 块 状 格 式 化 上 下 文 "， 也 就 是 BFC。 


又 比方 说 两 者 都 具有 “ 包 右 性 ”， 也 就 是 尺寸 收缩 包 右 ， 同 时 具有 自 
适应 性 。 有 些 人 知道 display:inline-block 声明 具有 “ 包 庄 性”， 和 希望 
绝对 定位 元 素 也 如 此 ， 就 有 了 下 面 这 样 的 设置 : 








.wrap { 





display: inline-block; // 没有 必要 





position: absolute; 


} 





实际 上 absolute 天 然 具 有 “ 包 衷 性 ”， 因 此 没有 必要 使 
用 display:inline-block ， 如 果 要 让 元 素 显 示 或 者 “无 依赖 定位 >， 可 
以 试 试 更 简短 的 display:inline 。 但 是 ， 和 float 或 其 他 “包裹 性 ” 声 
明 带 来 的 “ 自 适 应 性 ” 相 比 ，absolute 有 一 个 平时 不 太 被 人 注意 的 差 
异 ， 那 就 是 absolute 的 自 适应 性 最 大 宽度 往往 不 是 由 父 元 素 决 定 的 ， 

















本 质 上 说 ， 这 个 差异 是 由 “包含 块 "的 差异 决定 的 。 换 句 话 
说 ，absolute 元 素 具有 与 众 不 同 的 “包含 块 ”。 


6.5.1 absolute 的 包含 块 





包含 块 (containing block〉 这 个 概念 实际 上 大 家 一 直 都 有 接触 ， 就 
是 元 素 用 来 计算 和 定位 的 一 个 框 。 比 方 说 ，width:56% ， 也 就 是 宽度 一 
半 ， 那 到 底 是 哪个 “元 素 ” 宽 度 的 一 半 呢 ?注意 ， 这 里 的 这 个 “元 素 ” 实 际 
上 就 是 指 的 “包含 块 ”。 有 经 验 的 人 应 该 都 知道 ， 普 通 元 素 的 百分比 宽度 
是 相对 于 父 元 素 的 content box 宽度 计算 的 ， 而 绝对 定位 元 素 的 宽度 是 相 
对 于 第 一 个 position 不 为 static 的 祖先 元 素 计 算 的 。 实 际 上 ， 大 家 已 
经 和 “包含 块 ? 打 过 交道 了 ， 对 于 这 些 计算 规则 ， 规 范 是 有 明确 定义 的 ， 
具体 如 下 〔 吻 除 了 不 常用 的 部 分 内 容 〉。 














(1) 根 元 素 〈 很 多 场景 下 可 以 看 成 是 <htm1> ) 被 称 为 “初始 包含 
块 "， 其 尺寸 等 同 于 浏览 器 可 视窗 口 的 大 小 。 





(2) 对 于 其 他 元 素 ， 如 果 该 元 素 的 position 是 relative 或 
者 static ， 则 “包含 块 ” 由 其 最 近 的 块 容器 祖先 盒 的 content box 边 界 形 
成 。 


(3) 如 果 元 素 position:fixed ， 则 “包含 块 ”是 “初始 包含 块 ”。 


(4) 如 果 元 素 position:absolute ， 则 “包含 块 ” 由 最 近 的 
position 不 为 static 的 祖先 元 素 建 立 ， 具 体 方式 如 下 。 








如 果 该 祖先 元 素 是 纯 inline 元 素 ， 则 规则 略 复 杂 : 


。 假设 给 内 联 元 又 的 前 后 各 生成 一 个 宽度 为 0 的 内 联 盒子 〈inline 
box) ， 则 这 两 个 内 联 盒子 的 padding box 外 面 的 包围 盒 就 是 内 联 元 
素 的 “包含 块 ”; 

如 果 该 内 联 元 素 补 跨行 分 割 了 ， 那 么 “包含 块 "是 未 定义 的 ， 也 就 是 
CSS2.1 规 范 并 没有 明确 定义 ， 浏 览 器 目 行 太 挥 。 


否则 ,“ 包 含 块 ”由 该 祖先 的 padding box 边 界 形成 。 
如 果 没 有 符合 条 件 的 祖先 元 素 ， 则 “包含 块 ”" 是 “初始 包含 块 ”。 


可 以 看 到 ， 和 常规 元 素 相 比 ，absolute 绝对 定位 元 素 的 “包含 
块 > 有 以 下 3 个 明显 差异 : 


(1) 内 联 元 素 也 可 以 作为 “包含 块 * 所 在 的 元 系 ; 





(2) “包含 块 ? 所 在 的 元 素 不 是 父 块 级 元 素 ， 而 是 最 近 的 position 
不 为 static 的 祖先 元 素 或 根 元 素 ; 








(3) 边界 是 padding box 而 不 是 content box。 


首先 讲 第 一 点 差异 ， 也 就 是 内 联 元 妹 可 以 作为 "包含 块 ”。 这 一 点 个 
计 很 多 人 都 不 知道 ， 因 为 平时 使 用 得 少 。 为 何平 时 用 得 少 ? 原因 如 下 。 





(1) 我 们 一 旦 使 用 absolute 绝对 定位 ， 基 本 上 都 是 用 来 布局 ， 而 
内 联 元 素 主 要 的 作用 是 图 文 展示 ， 所 谓 道 不 同 不 相 为 谋 ， 因 此 两 者 很 难 
凑 到 一 块 儿 。 


(2) 理解 和 学 习 成 本 比较 高 。 内 联 元 系 的 “包含 块 不 能 按照 常规 
块 级 元 素 的 “包含 块 ”来 理解 。 举 个 例子 ， 如 下 HTML 代 码 : 


<Span style="position:relative;"> 
我 是 <big style="font-size:266%; "> 字号 很 大 </big> 的 文字 ! 





</span> 





其 效果 如 图 6-41 所 示 。 请 问 : 此 时 <span> 元 素 的 “包含 块 ”范围 是 什 
人 么 ? 

如 果 对 定义 理解 不 够 ,很 容易 误 认为 包含 块 的 上 下 边缘 被 其 中 “ 字 
号 很 大 ”的 <big> 元 素 给 撑 大 了 。 实 际 上 ， 此 时 元 素 的 “包含 块 ? 范 围 
与 <big> 元 素 坚 无 关系 ， 就 算 其 字号 大 小 设置 得 再 大 , “包含 块 " 范 围 依 
然 是 图 6-42 虚 线 所 示 的 那么 大 。 原 因 很 简单 ， 内 联 元 素 的 “包含 块 " 是 
由 “生成 的 ?前 后 内 联 盒子 决定 的 ， 与 里 面 的 内 联 盒子 细节 没有 任何 天 
系 。 


王 一 号 / 
我 是 子 写 1 民 大 axs ! 
图 6-41 简单 的 文字 呈现 效果 
度 杠 是 “包含 块 " 


PT 


图 6-42 ”实际 的 “包含 块 " 范 围 大 小 


我 根据 自己 的 进一步 测试 发 现 ， 内 联 元 素 的 “包含 块 ” 可 以 
受 : :first-line 伪 元 素 影 响 ， 但 不 受 : :first-letter 伪 元 素 影响 。 


可 以 看 出 ， 内 联 元 素 的 “包含 块 ? 范 围 相 对 稳固 ， 不 会 受 1ine- 
height 等 属性 影响 ， 因 此 ， 理 论 上 其 还 是 有 实用 价值 的 。 





(3) 兼容 性 问题 。 无 论 内 联 元 勾 是 单行 还 是 路 行 都 存在 兼容 性 问 
题 。 单 行 的 兼容 性 问题 存在 于 “包含 块 是 一 个 空 的 内 联 元 素 的 时 候 。 例 
如 ， 按 照 我们 的 理解 ， 下 面 的 代码 实现 的 效果 应 该 是 图 片 在 容器 的 右上 
角 对 齐 : 








<p> 
<span> 
<img src="1.jpg"> 
</span> 
</p> 


p { text-align: right; } 
p > span { position: relative; } 
p > span > img { 

position: absolute; 

right: ©; 


} 





但 是 根据 我 的 测试 ， 在 下 8 至 E10 浏览 器 下 ， 图 片 完 全 在 <p> 容器 
的 左 侧 外 部 显示 了 ，IE Edge 中 则 无 此 问题 。 需 要 给 空 的 <span> 元 素 设 
置 border 或 padding 让 “幽灵 空白 节点 ”显现 或 者 直接 插入 字符 才能 
现 一 致 。 


跨行 的 兼容 性 问题 在 于 规范 对 此 行为 并 未 定义 ， 导 致 浏览 器 在 实现 
上 各 有 差异 。 主 要 差异 在 于 ，Firefox 浏 览 器 的 “包含 块 ” 仅 覆盖 第 一 行 ， 
而 下 和 Chrome 浏 览 需 “包含 块 ” 的 表现 完全 符合 定义 ， 由 第 一 行 开头 和 最 
后 一 行 结尾 的 内 联 盒 子 共同 决定 。 差 寞 如 图 6-43 所 示 。 





度 杠 是 “包含 块 ” 


上 字号 很 大 隔 亲 1 


我 是 第 二 行内 容 。 FUurefox 规 国 
gassed mm A 

关子 号 和 民 大 mxs ! 

拒 是 第 二 行内 容 。; Cywrowwe 蕉 图 


图 6-43 ”Firefox 和 Chrome 跨 行内 联 元 素 “ 包 含 块 ” 对 比 


个 人 认为 ,， 琅 (包括 IE8) 和 Chrome 浏 览 器 的 泻 染 规则 是 更 准确 
的 ， 但 这 种 渔 染 可 能 会 带 来 妨 外 一 个 疑惑 ， 如 果 内 联 元 素 最 后 一 个 内 联 
盒子 的 右边 缘 比 第 一 个 内 联 盒子 的 左边 缘 还 要 靠 左 ， 那 岂 不 是 “包含 
块 ”宽度 要 为 负 了 ? 眼见 为 实 ， 例如， 我 们 修改 一 了 HTML， 让 “包含 
块 ”" 从 后 面 的 文字 开始 算 起 : 


我 是 <big style="font-size:266%;"> 字 号 很 大 </big> 


时 





<span style="position:relative;"> 的 文字 ! 我 是 第 二 行内 容 。</span> 











结果 “包含 块 ” 的 宽度 按照 9 来 处 理 了 ， 起 始 位 置 为 第 一 个 内 联 盒 子 所 在 
的 位 置 ， 如 图 6-44 所 示 。 
rn : 
我 和 子 号 民 大 ixs ! 
我 是 第 二 行内 容 。 。 ; 


图 6-44 “包含 块 ”表现 为 宽度 9 示意 








然后 讲 第 二 点 差异 ， 也 就 是 绝对 定位 元 素 计算 的 容器 是 第 一 
个 position 不 为 static 的 祖先 元 素 。 这 个 很 多 人 知道 ， 因 为 平时 
left 、top 定位 用 得 很 频繁， 用 着用 痢 就 知道 了 百分比 宽度 、 高 度 以 
及 定位 什么 的 和 普通 元 素 不 一 样 。 这 也 衍生 出 了 另外 一 个 有 意思 的 小 问 


题 ， 就 是 height:166% 和 height:inherit 的 区 别 。 对 于 普通 元 素 ， 
两 者 确实 没什么 区 别 ， 但 是 对 于 绝对 定位 元 素 就 不 一 样 

了 。height:166% 是 第 一 个 具有 定位 属性 值 的 祖先 元 素 的 高 度 ， 

而 height:inherit 则 是 单纯 的 父 元 素 的 高 度 继 承 ， 在 某 些 场景 下 非常 
好 用 。 








然后 就 是 很 多 人 并 没有 注意 到 的 ， 也 是 本 节 的 重点 内 容 ， 那 就 是 绝 
对 定位 元 素 的 “包裹 性 ”中 的 “宽度 自 适应 性 ”其 实 也 是 相对 于 “包含 块 "来 
表现 的 。 








我 们 先 从 一 个 简单 的 例子 说 起 ， 代 码 如 下 : 


.box { position: absolute; } 


<div class="box"> 文 字 内 容 </boxy> 





请 问 : .box 元 素 的 宽度 是 多 少 ? 文字 会 换行 吗 ? 如果.box 元 素 中 
有 满 满 1666 个 汉字 ， 文 字 会 换行 吗 ? 如 果 换 行 ， 在 哪里 换行 ? 


很 饮 单 的 例子 ， 很 简单 的 问题 ,但 是 能 够 准确 地 回答 清楚 的 人 私 怕 
并 不 多 。 








在 通常 场景 下 ，.box 元 素 宽度 就 是 里 面 文字 的 宽度 ， 不 会 换行 ; 
随 着 文字 越 来 越 多 ， 如 果 文 字 足 够 多 ， .box 元 素 宽 度 会 越 来 越 大 ， 但 
是 不 会 无 限制 大 下 去 ， 因 为 超过 一 定 限制 是 会 自动 换行 的 ， 而 这 个 限制 
就 是 .box 元 素 的 “包含 块 ”。 


























注意 这 里 的 几 个 措 妇 ， 第 一 个 是 “通常 场景 下 ”， 第 二 个 是 “会 自动 
换行 "。“ 会 自动 换行 ”说 的 就 是 “ 包 右 性 ”中 的 “宽度 自 适应 性 ”"。 举 个 简单 





的 例子 ， 假 设 .box 元 素 有 一 个 宽度 268px 同时 position 为 relative 
的 容器 元 素 ，CSS 代 码 如 下 : 
.Container { 


width: 266px; 
border: 1px solid; 


position: relative; 


} 


.box { position: absolute; } 





同时 .box 元 素 里 面 的 文字 内 容 非 常 多 ， 此 时 ，.box 元 系 的 “包含 块 ? 束 
是 .container 元 素 ， 因 此 ，.box 元 素 最 终 的 宽度 就 是 288px ( 见 图 6- 
45) ， 也 就 是 说 ， 绝 对 定位 元 素 默 认 的 最 大 宽度 就 是 “包含 块 ”" 的 宽度 。 





.container 高 度 塌陷 是 因为 absolute 破坏 了 正常 的 CSS 流 ， 此 
乃 “ 破 坏 性 ”， 宽 度 被 relative 限制 在 最 大 2690px ， 此 乃 “ 包 于 性 ”， 
此 ， 对 于 弹 框 这 种 绝对 定位 或 固定 定位 的 元 素 是 没有 必要 设置 max- 
width:166% 的 : 








dialog { 
position: absolute; 


max-width: 166%; /* 多 余 */ 


} 











而 “通常 场景 下 ”说 的 是 ， 有 可 能 我 们 的 “包含 块 ”( 或 者 “包含 块 ” 狮 
余 的 空间 〉 小 到 不 足以 放下 “文字 内 容 * 这 4 个 汉字 。 于 是 ， 一些“ 怪 
异 ” 的 现象 就 很 好 理解 了 ， 比 方 说 纯 CSS 定 位 或 JavaScript 计 算 定 位 实现 
的 提示 效果 一 柱 擎 天 的 问题 。 


先 看 CSS 实 现 ， 演 示 地 址 为 http://demo.cssworld.cn/6/5-1.php。 我 们 


的 目标 效果 是 鼠标 hover 图 标 出 现 类 似 于 如 图 6-46 所 示 的 效果 。 





图 6-45“ 包 事 性 ”与 “包含 块 ” 


电 


图 6-46 ”计划 实现 的 提示 效果 


我 们 可 以 利用 : :before 和 : :after 伪 元 素 实现 我 们 想 要 的 效果 ， 

一 个 实现 三 角 ， 一 个 实现 矩形 区 。 为 了 不 干扰 布局 ， 显 然 实现 提示 效果 
的 两 个 伪 元 素 会 使 用 absolute 绝对 定位 ， 为 了 定位 准确 ， 我 们 会 给 小 
图 标 元 素 设 置 position:relative 。 此 时 问题 来 了 : 由 于 提示 信息 的 
内 容 有 长 有 短 ， 我 们 不 可 能 给 提示 元 素 设置 一 个 特定 的 宽度 ， 于 是 宽度 
表现 走 “ 包 于 性 ”"， 也 就 是 最 大 宽度 不 超过 “包含 块 ”的 宽度 ， 但 是 恰好 此 
时 “包含 块 ”就 是 我 们 的 小 图 标 元 素 ， 并 且 宽 度 往往 都 不 超过 20 像 素 ， 也 
就 是 我 们 的 提示 信息 只 能 够 在 20 像 素 宽 的 区 域内 显示 ， 这 就 导致 了 最 终 
的 文字 内 容 “ 一 柱 擎 天 ， 如 图 6-47 所 示 。 











要 修复 这 一 问题 其 实 很 简单 ， 只 要 改变 默认 的 宽度 显示 类 型 就 可 
以 ， 添 加 white-space: nowrap， 让 宽度 表现 从 “ 包 庄 性 ? 变 成 < 最 大 可 
用 宽度 "”， 点 击 演示 页 面 的 删除 图 标 可 看 到 修复 “一 柱 擎 天 ”问题 后 的 效 
果 。 








绝对 定位 元 素 “" 包 衷 性 ?的 “包含 块 ?限制 不 仅 出 现在 宽度 不 足 的 时 
候 ， 有 时 候 就 算 “ 包 含 块 ” 的 宽度 足够 大 ， 也 依然 会 出 现 “ 一 柱 擎 天 ”。 眼 
见 为 实 ， 还 是 提示 信息 效果 ， 不 过 这 次 我 们 使 用 JavaScript 实 现 ， 黑 色 提 
示 条 相关 的 HTML 内 容 直 接 插入 <body> 标签 中 ， 此 时 “包含 块 ” 的 宽度 
就 是 浏览 器 窗 体 的 宽度 ， 按 道理 讲 ， 是 不 会 出 现 “ 一 柱 擎 天 ”效果 的 ， 但 
是 人 算 不 如 天 算 ， 不 该 发 生 的 还 是 发 生 了 ! 





演示 地 址 为 http:/demo.cssworld.cn/6/5-2.php。 当 我 们 的 小 图 标 在 浏 
览 器 窗 体 靠近 右 侧 边缘 的 时 候 ，“ 一 柱 擎 天 ”的 翡 剧 同样 发 生 了 ， 如 图 6- 


48 所 示 。 
图 6-47 ”被 < 包含 块 "限制 的 一 柱 敬 天 效果 (CSS 版 ) 
删 
全 


图 6-48 ”被 “包含 块 ? 限 制 的 一 柱 擎 天 效果 《〈JavaScript 版 ) 





原因 不 难 理解 。 虽 然 次 黑色 的 提示 元 素 的 “包含 块 ? 宽 度 是 整个 浏览 
铝 窗 体 宽度 ， 放 几 个 文字 绰 绎 有 余 ， 但 是 ， 由 于 我 们 的 图 标 位 于 浏览 器 
的 右边 缘 ，JavaScript 定 位 的 时 候 ， 就 会 设置 一 个 很 大 的 left 属性 值 ， 
导致 * 包 合 块 ?剩余 的 空间 不 足 ， 也 就 是 提示 元 素 的 “ 目 适 应 宽度 ”不足 ， 
导致 文字 只 能 竖 大 显示， 从 而 出 现 “ 一 柱 擎 天 ”。 





要 修复 此 问题 其 实 很 简单 ， 只 要 改变 默认 的 宽度 显示 类 型 就 可 以 ， 
添加 white-space: nowrap， 让 宽度 表现 从 * 包 囊 性 ? 变 成 < 最 大 可 用 帘 
度 ”， 点 击 演示 页 面 的 删除 图 标 可 看 到 修复 “一 柱 擎 天 ?问题 后 的 效果 。 
当然 ， 实 际 开发 的 时 候 ， 最 好 改变 提示 的 方向 ， 例 如 右边 缘 的 时 候 ， 磊 
侧 提 示 。 











最 后 讲 第 三 点 差异 ， 也 就 是 计算 和 定位 是 相对 于 祖先 定位 元 素 的 
padding box。 为 何 绝对 定位 的 定位 要 相对 于 padding box 呢 ?这 其 实 和 
overflow 隐藏 也 是 padding box 边 界 类 似 ， 都 是 由 使 用 场景 决定 的 。 





举 个 例子 ， 在 移动 首 ， 为 了 实现 良好 的 视觉 感受 ， 列 表 或 者 模块 的 
言 恩 内 容 主 体 距离 窗 体 两 侧 都 有 一 定 的 空白 ， 这 个 空 晶 一般 都 会 使 
用 padding 撑 开 的 ， 而 不 是 margin ， 原 因 在 于 这 些 列表 是 链接 ， 外 部 
一 定 会 使 用 <a> 元 素 ， 而 为 了 准确 反馈 啊 应 区 域 ，《ay> 元 素 在 tap 的 时 
候 会 由 加 深 的 背景 块 示意 参见 微 信和 列表 tap 时 候 的 反馈 ) ， 所 以 ， 如 
果 左 右 的 间距 使 用 margin 撑 开 ， 束 会 出 现 列表 的 点 击 反 馈 背 景区 域 左 
右边 距 透 明 的 问题 ， 视 沉 效 末 和 体验 都 是 不 好 的 ， 因 为 margin box 永 远 


征 透 明 的 。 


























现在 来 需求 了 : 需要 在 列表 或 者 模块 的 右上 角 显 示 一 个 明显 的 标 
签 ， 如 “精华 ”“ 星 冠 ? 之 类 。 此 时 ， 我 们 无 须 任何 计算 ， 直 接 使 用 数值 8 
定位 在 列表 的 右上 角 即 可 ， 代 码 示 意 如 下 : 





.list { 
padding: 1rem; 


} 

.tag { 
position: absolute; 
top: 6; right: 6; 


CO 
但 是 ， 如 果 我 们 的 定位 是 相对 于 content box 计 算 的 ， 则 CSS 代 码 应 该 类 
似 这 样 : 
.list { 

padding: 1rem; 


} 
.tag { 


position: absolute; 
top: lrem; right: 1lrem; 


} 





看 上 去 好 像 没 什么 问题 ， 但 实际 上 增加 了 我 们 日 后 开发 维护 的 成 
本 ， 因 为 绝对 定位 元 素 的 定位 值 和 列表 容器 的 padding 值 耦合 在 一 起 
了 : 当 我 们 对 padding 间距 进行 调整 的 时 候 ， 绝 对 定位 元 素 的 right 
、top 值 也 一 定 要 跟着 一 起 调整 ， 否 则 就 会 出 现 样 式 问题 ， 而 实际 开发 
的 时 候 ， 瓦 记 调 整 绝 对 定位 元 素 的 定位 值 是 非常 向 见 的 ，bug 继 而 出 
现 。 











对 一 个 项 目 而 言 ， 间 距 并 非 一 成 不 变 ， 列 表 间 的 上 下 左右 间距 会 因 
为 内 容 或 者 场景 的 不 同 而 不 同 ， 这 就 导致 每 一 次 出 现 有 差异 的 布局 ， 我 
们 都 需要 重新 额外 写 一 个 定位 样式 。 例 如 : 














.list-2 { 

padding: .75rem; 
} 
.tag-2 { 

position: absolute; 


top: .75rem; right: 
} 





这 显然 增加 了 一 定 的 开发 成 本 。 而 相对 于 padding box 定 位 ， 列 表 的 
padding 属性 值 是 多 少 对 我 们 的 样式 表现 没有 任何 影响 。 眼 见 为 实 ， 扫 
下 面 的 三 维 码 访问 。 点 击 列表 下 面 的 按钮 改变 列表 的 padding 值 大 小 会 
发 现 ， 我 们 的 标签 在 右上 和 角 微 丝 不 动 ， 如 图 6-49 所 示 。 

















@ 改变 列表 padding 大 小 ) 


图 6-49 ” ”padding 变 大 后 绝对 定位 元 素 位 置 依旧 稳固 











然而 ， 实 际 项 目 场景 千变万化 ， 有 时 候 ， 我 们 需要 的 效果 并 不 是 定 
位 在 列表 的 边缘 ， 而 是 定位 在 内 容 的 边缘 ， 很 多 人 不 假 思 索 就 直接 使 用 
类 似 下 面 的 代码 实现 : 





.list { 
padding: 1lrem; 


.tag { 


position: absolute; 
top: lrem; right: 1lrem; 


} 














效果 虽然 达成 了 ， 但 是 底子 还 是 不 够 稳固 ， 因 为 top 、right 属性 
值 大 小 和 padding 属性 值 耦合 在 了 一 起 。 实 际 上 ， 有 小 技巧 可 以 使 其 不 
耦合 ， 那 就 是 间距 不 是 使 用 padding 撑 开 ， 而 是 使 用 透明 的 border 撑 
开 。 例 如 : 


.list { 
border: 1rem solid transparent; 
} 
.tag { 
position: absolute; 
top: 6; right: 6; 
} 








top 、right 属性 值 都 是 9 ， 被 固定 了 下 来 ， 于 是 当 间 距 发 生变 化 
的 时 候 ， 只 需要 改变 border 宽度 就 可 以 ， 示 意 如 下 : 


.list-2 { 
border: .75rem solid transparent; 


} 








此 技巧 唯一 需要 注意 的 就 是 尽量 不 要 设置 overflow:hidden 。 
6.5.2 具有 相对 特性 的 无 依赖 absolute 绝对 定位 


即使 写 了 很 多 年 CSS 代 码 的 人 也 可 能 会 错误 地 回答 下 面 这 个 问题 : 





一 个 绝对 定位 元 素 ， 没 有 任何 left/top/right/bottom 属性 设置 ， 并 
且 其 祖先 元 素 全 部 都 是 非 定位 元 素 ， 其 位 置 在 哪里 ? 








很 多 人 都 认为 是 在 浏览 右 窗 口 左 上 方 。 实 际 上 ， 还 是 当前 位 置 ， 不 
是 在 浏览 器 左上 方 。 


这 是 关于 absolute 绝对 定位 最 典型 的 错误 认 知 。 正 是 这 种 错误 认 
知 导 致 凡是 使 用 absolute 绝对 定位 的 地 方 ， 一 定 父 容 
器 position:relative ， 同 时 left/top 等 属性 定位 ， 甚 至 必 同 时 使 
用 z-index 属性 设置 层级 。 














在 我 看 来 ， 这 是 非常 严重 的 认 知 和 使 用 错误 ! 


请 牢记 下 面 这 句 话 : absolute 是 非常 独立 的 CSS 属 性 值 ， 其 样式 
和 行为 表现 不 依赖 其 他 任何 CSS 属 性 就 可 以 完成 。 


言语 是 苍白 的 ， 我 们 来 看 一 个 例子 感受 一 下 。 图 6-50 左 上 角 有 一 
个 “TOP1” 的 图 形 标 志 ， 请 问 如 何 布局 ? 





图 6-50 左上 角 有 “TOP1” 图 形 目 标 效 果 示 意 





想必 很 多 人 是 这 么 实现 的 : 


.father { 
position: relative; 


} 

.Shape { 
position: absolute; 
top: 68; left: 0; 

} 








如 果 你 也 是 这 么 实现 的 ， 就 要 注意 了 ， 因 为 这 说 明 你 对 absolute 
认 知 还 是 太 浅 萍 了。 实际 上 ， 只 用 下 面 一 行 CSS 就 足够 了 : 





.Shape { 
position: absolute; 


} 








没 错 ， 束 这 一 行 ， 而 且 兼 容 性 好 得 出 奇 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/6/5-4.php 或 者 扫 右 侧 的 二 维 码 。 








看 到 没 ? absolute 定位 效果 实现 完全 不 需要 父 元 素 设 置 position 
为 relative 或 其 他 什么 属性 就 可 以 实现 ， 我 把 这 种 没有 设 
置 left/top/right/bottom 属性 值 的 绝对 定位 称 为 “无 依赖 绝对 定 











位 *。 很 多 场景 下 , “无 依赖 绝对 定位 ”要 比 使 用 1eft/top 之 类 属性 定位 
实用 和 强大 很 多 ， 因 为 其 除了 代码 更 简洁 外 ， 还 有 一 个 很 棒 的 特性 ， 惑 
是 “相对 定位 特性 ”。 





明明 absolute 是 ‘绝对 定位 的 意思 ， 怎 么 又 扯 到 ‘相对 定位 特性 * 了 
呢 ? 没 错 , “无 依赖 绝对 定位 ”本 质 上 就 是 “相对 定位 >， 仅仅 是 不 占据 
CSS 流 的 尺寸 空间 而 已 。 























“相对 性 ”和 “不 占据 空间 ”这 两 个 特性 在 实际 开发 的 时 候 非 常 有 用 ， 
除了 上 和 面 左 上 角 加 “TOP1” 图 形 标志 的 案例 ， 我 再 举 几 个 实用 例子 ， 展 
示 一 下 “无 依赖 绝对 定位 ”的 强大 之 处 。 


1. 各 类 图 标定 位 





我 们 经 常会 在 导航 右上 方 增加 一 个 “NEW” 或 者 “HOT”* 这 样 的 小 图 
标 ， 如 图 6-51 所 示 。 要 实现 在 导航 文字 右上 方 的 定位 很 简单 ， 直 接 对 加 
图 标 这 个 元 素 进 行 样式 设 定 就 可 以 了 ， 原 来 纯 文字 导航 时 的 样式 完全 不 
需要 有 一 丁点 儿 的 修改 。 下 面 以 ‘<HOT”*” 图 标 为 例 : 











热门 导航 











图 6-51 ”导航 文字 右上 方 图 标示 意 


.Icon-hot { 
position: absolute; 
margin: -6px 6 86 2px; 


width: 28px; height: 11px; 
background: url(hot.gif); 





一 个 简 简 单单 的 position:absolute ， 然 后 通过 margin 属性 进行 
定位 ， 效 果 即 达成 ， 包 括 IE6 在 内 的 浏览 器 都 是 兼容 良好 的 。 


日 后 这 个 图 标 下 架 了 ， 我 们 只 需要 把 图 标 对 应 的 HTML 代码 和 CSS 
删 掉 就 可 以 ， 原 来 的 代码 完全 不 需要 改动 。 不 仪 代码 简洁 ， 日 后 的 维护 
也 很 方便 ， 更 关键 的 是 ， 即 使 导航 中 的 文字 长 度 发 生 了 变化 ， 我 们 的 图 
标 依 然 定 位 良好 ， 因 为 “无 依赖 绝对 定位 ”的 图 标 是 自动 跟 在 文字 后 面 显 
示 的 。 








设想 一 下 ， 如 果 给 父 元 素 设 置 position:relative， 然 
后 right/top 定位 ， 文 字 长 度 一 旦 发 生变 化 ，CSS 代 码 就 要 重新 调整 ， 
这 维护 成 本 显然 要 比 前 一 种 方法 高 了 很 多 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/6/5-5.php 或 者 扫 下 面 的 二 维 码 。 实 际 上 ， 即 使 是 
普通 的 水 平 对 齐 的 图 标 也 可 以 使 用 “无 依赖 绝对 定位 ”实现 ， 类 似 图 6-52 
所 示 效 果 。 

















图 6-52” 图片 和 文字 水 平 对 齐 


我 们 可 以 这 么 处 理 : 


<Span class="icon-x"> 
<i class="icon-warn"></i> 邮 箱 格 式 不 准确 























</span> 

.ijcon-x { 
line-height: 26pX; 
padding-left: 28px; 


} 
.ijcon-warn { 

position: absolute; 

margin-left: -26px; 

width: 26px; height: 28px; 

background: url(warn.png) no-repeat center; 


} 





同样 是 position:absolute ， 然 后 简单 的 margin 偏 移 实 现 。 此 方 
法 兼容 性 很 好 ， 与 inline-block 对 齐 相 比 的 好 处 在 于 ，inline- 
block 对 齐 最 终 行 框 高 度 并 不 是 28px ， 因 为 中 文 下 沉 ， 图 标 居中 ， 要 
想 视觉 上 水 平 ， 图 标 vertical-align 对 齐 要 比 实际 低 一 点 儿 ， 这 就 会 
导致 最 终 整 个 行 框 的 高 度 不 是 预期 的 28px， 而 是 21px 或 者 更 大 。 但 
是 ， 如 果 使 用 “无 依赖 绝对 定位 ”实现 ， 则 完全 不 要 担心 这 一 问题 ， 因 为 
绝对 定位 元 素 不 会 改变 正常 流 的 尺寸 空间 ， 束 算 我 们 的 图 标 有 38px 大 
小 ， 行 框 高 度 依然 是 纯 文 本 所 在 的 26px 高 度 。 








2. 超越 季 规 布局 的 排版 


图 6-53 给 出 的 是 一 个 常见 的 注册 表单 ， 为 了 保证 视觉 舒适 ， 我 们 往 
往 会 让 表单 水 平 大 中 对 齐 。 例 如 ， 这 里 宽度 300 多 像素 ， 于 是 有 : 








* 邮箱 


图 6-53 ”水 平 居 中 对 齐 的 注册 表单 





.box { 
width: 356px; 
margin: auto; 


} 





通过 设置 margin:auto 实现 水 平 居 中 效果 ， 乍 一 看 效果 达成 ， 但 
是 实际 开发 的 时 候 还 有 提示 或 报错 等 交互 效果 。 有 一 种 做 法 是 提示 信息 
放 在 输入 框 的 下 面 ， 但 这 样 做 会 市 来 一 种 不 好 的 体验 ， 那 就 是 提示 信息 
出 现 和 隐藏 的 时 候 ， 整 个 容器 的 高 度 会 突然 变化 ; 还 有 一 种 做 法 就 是 在 
输入 框 的 后 面 显示 ， 但 是 为 了 证 默认 状态 下 表单 水 平 居 中 ， 外 面容 器 的 
宽度 不 是 很 大 ， 因 此 如 果 在 后 面 显示 ， 束 会 有 宽度 不 够 的 问题 。 如 果 我 
们 使 用 “无 依赖 绝对 定位 *”， 那 这 个 问题 就 不 再 是 问题 了 。 假 设 提示 文字 
内 容 元 素 的 类 名 是 .remark ， 则 有 CSS 代 码 如 下 : 

















remark { 
position: absolute; 
margin-left: 16px; 


} 





就 这 么 简 简 单单 的 CSS 代 码 ， 效 果 即 达成 ， 既 在 输入 框 的 后 面 显 





示 ， 又 跳出 了 容器 宽度 的 限制 ， 同 时 显 隐 不 会 影响 原先 的 布局 。 


眼见 为 实 ， 输 入 后 面 的 演示 页 面 地 址 体验 : 
http:/demo.cssworld.cn/6/5-6.php。 效 果 如 图 6-54 所 示 。 








图 6-54 “无 依赖 绝对 定位 ”提示 信息 布局 示意 


更 为 关键 的 是 ， 提 示 信 息 的 位 置 智能 跟随 输入 框 。 例 如 ， 我 们 这 里 
把 输入 框 的 宽度 改 小 ， 会 看 到 提示 信息 会 自动 跟着 往 前 走 ， 如 图 6-55 所 
示 。 与 容器 设置 position:relative 再 通过 left 属性 实现 的 定位 相 
比 ， 其 代码 更 简洁 ， 容 错 性 更 强 ， 维 护 成 本 更 低 。 








此 外 ， 页 面 中 的 星 号 也 是 典型 的 “无 依赖 绝对 定位 >”， 目 身 绝对 定 
位 ， 然 后 通过 margin- left 负 值 偏 移 实现 ， 从 而 保证 所 有 输入 信息 头 
左 对 齐 ， 同 时 叉 不 会 影响 原先 的 布局 ， 也 就 是 星 号 有 没有 对 布局 没有 任 
何 影 啊 。 











3. 下 拉 列 表 的 定位 


在 实现 静态 下 拉 效 果 的 时 候 ， 也 是 可 以 使 用 “无 依赖 绝对 定位 ”的 。 
演示 页 面 地 址 http://demo.cssworld.cn/6/5-7.php 给 出 了 一 个 例子 。 当 我 们 


focus 输入 框 的 时 候 ， 下 拉 列 表 会 呈现 ， 如 图 6-56 所 示 。 
二 邮箱 


+ 密码 请 输入 6-16 位 密码 ， 不 能 使 用 空格 


图 6-55 “无 依赖 绝对 定位 ?智能 跟随 示意 











图 6-56 “无 依赖 绝对 定位 ”下 拉 列 表 效 果 


这 里 ， 这 个 下 拉 列 表 的 定位 采用 的 就 是 “无 依赖 绝对 定位 ”"， 相 关 
HTML 和 CSS 代 码 如 下 : 





<input> 
<div class="result"> 
<div class="datalist"> 
<a href> 搜 索 结果 1</a> 


</div> 
</div> 


/* 下 拉 列 表 的 无 依赖 绝对 定位 */ 
.datalist { 
position: absolute; 





} 

/* 列表 的 显 隐 控制 */ 

.Search-result { 
display: none; 





input:focus ~ .search-result { 
display: block; 





束 一 个 position:absolute 就 实现 了 我 们 想 要 的 效果 ,没有 left 
、top 定位 ， 父 元 素 也 没有 position:relative 设 定 ， 效 果 就 达成 
了 了， 而且 兼容 性 好 到 了 6 都 完美 定位 。 


除了 代码 少 这 个 好 处 外 ， 维 护 成 本 也 在 一 定 程 度 上 降低 了 ， 比 方 
说 ， 输 入 框 的 高 度 发 生 了 变化 ， 我 们 不 需要 修改 任何 CSS 代 码 ， 列 表 依 
然 在 输入 框 的 底部 完美 对 齐 显 示 。 不 仅 如 此 ， 没 有 了 父 元 
素 position:relative 限定 ， 我 们 的 z-index 层级 管理 规则 更 简单 
了 ， 并 且 也 无 须 担 心 父 元 素 设 置 oveflow:hidden 会 裁剪 下 拉 列 表 。 











不 过 这 里 我 有 必要 补充 一 把 ， 里 然 “ 无 依赖 绝对 定位 ”好 处 多 多 ， 但 
建议 只 用 在 静态 交互 效果 上 ， 比 方 说 ， 导 航 二 级 沫 单 的 显示 与 定位 。 如 
果 是 动态 呈现 的 列表 ， 建 议 还 是 使 用 JavaScript 来 计算 和 定位 。 





4. 占 位 符 效果 模拟 


IE9 及 其 以 下 浏览 器 不 支持 placeholder 占 位 符 效果 ， 实 际 开 发 的 
时 候 ， 针 对 这 些 浏 览 器 ， 需 要 进行 模拟 。 比 较 好 的 做 法 是 使 用 <label> 
标签 和 输入 框 关联 并 有 覆盖 在 输入 框 上 面 ， 好 处 是 点 击 占 位 文字 输入 框 天 
然 focus ， 并 且 不 会 污染 输入 框 的 value 。 








这 里 的 缆 凋 效果 也 可 以 使 用 “无 依赖 绝对 定位 ?实现 ， 好 处 是 组 件 化 
的 时 候 适 用 性 更 三 ， 因 为 不 会 对 父 级 元 系 进 行 定位 属性 限制 。 用 下 面 的 
代码 简单 演示 一 下 实现 原理 : 





<label class="placeholder"” for="text"> 占 位 符 </label> 
<input id="test"> 

/* 和 输入 框 一 样 的 样式 */ 

.placeholder, input { 





ee 





/* 占 位 符 元 素 特 有 样式 */ 
.placeholder { 
position: absolute; 








} 














由 于 “无 依赖 绝对 定位 ?本 质 上 就 是 一 个 不 占据 任何 空间 的 相对 定位 
元 素 ， 因 此 这 里 我 们 让 占 位 符 元 素 和 输入 框 的 布局 样式 一 模 一 样 ， 再 设 
置 绝 对 定位 ， 束 可 以 和 输入 完美 重 登 定位。 当然 有 一 些 样 式 是 需要 重 置 
的 ， 比 方 说 ， 输 入 框 经 常会 设置 border 边框 样式 ， 那 么 我 们 的 占 位 符 
元 素 就 需要 把 边框 颜色 设置 成 透明 的 ， 例 如 : 








.placeholder { 
border-color: transparent; 


} 





随 着 时 代 的 进步 和 浏览 占 的 发 展 ， 这 种 占 位 符 效 果 模 拟 的 场景 会 越 
来 越 少 ， 因 此 这 里 就 不 专门 做 演示 页 面 详细 展开 讲解 了 。 但 是 ,“ 无 依 
赖 绝对 定位 ”的 简约 便捷 以 及 健壮 性 是 显而易见 的 。 


5. 进一步 深入 “无 依赖 绝对 定位 ” 


虽然 说 元 素 position:absolute 后 的 display 计算 值 都 是 块 状 


的 ， 但 是 其 定位 的 位 置 和 没有 设置 position:absolute 时 候 的 位 置 相 
关 。 举 个 简单 的 例子 ， 有 下 面 两 段 HIML 人 代码: 


<h3> 标 题 <span class="follow">span</span></h3> 


<h3> 标 题 <div class="follow">div</div></h3> 





其 差别 就 在 于 “标题 "文字 后 面 跟随 的 标签 ， 一 个 是 内 联 的 <span> 
， 还 有 一 个 是 块 状 的 <div> ， 此 时 ， 显 然 span 字符 是 跟 在 “标题 ”后 面 
显示 ，div 字符 则 换行 在 “标题 ?下 面 显示 ， 这 个 想必 大 家 都 知道 。 好 ， 
现在 有 如 下 CSS 代 码 : 





.follow { 
position: absolute; 


} 





虽然 此 时 无 论 是 内 联 的 <span> 还 是 块 状 的 <div>， 计算 值 都 
是 block ， 但 是 它们 的 位 置 还 和 没有 应 用 position:absolute 的 时 候 
一 样 ， 一 个 在 后 面 ， 一 个 在 下 面 ， 如 图 6-57 所 示 。 
标题 span 
标题 


div 


图 6-57 “无 依赖 绝对 定位 ”表现 规则 示意 


假如 HIML 是 下 面 这 样 的 : 


<h3> 标 题 </h3><span class="follow">span</span> 


<h3> 标 题 </h3><div class="follow">div</div> 








那么 由 于 非 绝 对 定位 状态 下 span 和 div 都 在 “标题 ”的 下 面 ， 因 此 ， 这 
里 最 后 的 效果 也 同样 是 都 在 “标题 "的 下 面 。 


看 上 去 ,“ 无 依赖 绝对 定位 ?的 定位 原理 还 是 挺 简单 的 ， 但 是 在 实际 
开发 的 时 候 ， 有 时 候 会 遇 到 一 点 问题 。 


首先 ，IE7 浏 览 器 下 ， 块 状 的 <div> “无 依赖 绝对 定位 ”的 定位 表现 
如 同 内 联 的 <span> ， 也 就 是 无 论 是 块 级 元 素 还 是 内 联 元 素 , “无 依赖 绝 
对 定位 ”后 都 和 内 联 元 素 一 行 显示 。 若 要 保证 兼容 ， 可 以 在 外 部 套 一 层 
空 的 <div> 标签 来 维持 原始 的 块 状 特性 。 不 过 ， 因 为 现在 很 少 需要 莱 容 
IE7 浏 览 器 ， 所 以 这 不 算 事 儿 。 




















其 次 ， 前 文 提 到 浮动 和 绝对 定位 是 死对头 ， 当 “浮动 * 和 “无 依赖 绝 
对 定位 ?相遇 的 时 候 ， 就 会 发 生 一 些 不 愉快 的 事情 。HITML 代 码 如 下 : 


<div class="nav" > 导航 1</div> 
<img src="new.png" class="follow"> 


<div class="nav"> 导 航 2</div> 





这 里 .nav 是 一 个 浮动 色 块 ， 相 关 CSS 如 下 : 


.follow { 
position: absolute; 
} 
.nav { 
width: 166pX; 
line-height: 46px; 


background-color: #333; 
color: #fff; 
text-align: center; 
float: left; 








结果 在 正和 Chrome 浏 览 器 下 ， 夹 在 中 间 的 <img> 在 中 间 显 示 《〈 见 图 
6-58 上 ) ， 但 是 Firefox 浏 览 器 却 是 在 最 后 显示 ( 见 图 6-58 下 ) 。 











图 6-58 “浮动 ”和 “无 依赖 绝对 定位 ?不 一 致 的 表现 





此 处 的 浏览 器 不 一 致 的 行为 表现 应 该 属于 “未 定义 行为 ”， 没 有 谁 对 
谁 错 ， 只 是 各 自 按照 自己 的 泻 染 规则 表现 而 已 。Firefox 浏 览 器 下 的 定位 
位 置 或 许 比 较 好 理解 ， 因 为 和 没有 设置 position: absolute 表现 一 
致 ， 符 合 我 们 对 上 面 规则 的 理解 。 那 为 何 正 和 Chrome 浏 览 器 却 在 中 间 显 
示 呢 ?我 认为 是 这 样 的 : 浏览 器 对 于 DOM 元 素 的 样式 泻 染 是 从 前 往 
后 、 由 外 及 内 的 ， 因 此 泻 染 顺序 是 先 “ 导 航 1”"， 再 “图 片 ”” 最 后 是 “导航 
2”。 当 泻 染 到 “图 片 ” 的 时 候 ， 由 于 “导航 1 左 浮动 ， 因 此 内 联 的 图 片 跟 
在 后 面 显示 ， 此 时 由 于 设置 了 position:absolute ， 因 此 当前 位 置 定 
位 并 不 占据 任何 空间 ， 再 泻 染 “ 导 航 2” 的 时 候 ， 中 间 的 “图 片 ” 基 本 上 跟 
不 存在 没什么 区 别 ， 因 此 也 就 和 “导航 1” 紧 密 相连 了 ， 最 终 形成 了 “图 
片 在 中 间 显 示 的 样式 表现 。 


























对 于 上 述 场景 ， 如 宁 和 硕 望 各 个 浏览 喜 的 表现 都 是 一 样 的 ，<img> 外 
层 舱 套 一 层 标签 并 浮动 即 可 ， 注 意 ， 是 外 层 标签 浮动 。 由 于 浮动 和 绝对 
定位 水 火 不 容 ， 本 里 设置 浮动 是 没有 任何 效果 的 。 








6.5.3 absolute 与 text-align 


按 道 理 讲 ，absolute 和 float 一 样 ， 都 可 以 让 元 素 块 状 化 ， 应 该 





不 会 受 控制 内 联 元 素 对 齐 的 text-align 属性 影响 ， 但 是 最 后 的 结果 却 
出 人 意料 ，text-align 居然 可 以 改变 absolute 元 素 的 位 置 。 





如 下 简单 的 HTML 和 CSS 代 码 : 


<p><img src="1.jpg"></p> 


text-align: center; 


img { 
position: absolute; 


} 








在 Chrome 和 Firefox 浏 览 器 下， 图 片 在 中 间 位 置 显 示 了 ， 但 是 仪 仪 是 在 中 
间 区 域 显 示 ， 并 不 是 水 平 居 中 ， 如 果 我 们 给 <p> 设 定 尺寸 并 添加 背景 
色 ， 就 会 看 到 如 图 6-59 所 示 的 效果 。 


眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/6/5-8.php 或 者 扫 下 面 的 
二 维 码 。 








图 6-59 ”图 片 在 中 间 位 置 开始 显示 


虽然 本 示例 中 图 片 位 置 确 实 受 text-align 属性 影响 ， 但 是 并 不 
是 text-align 和 absolute 元 素 直 接 发 生 关 系 ，absolute 元 素 的 
display 计算 值 是 块 状 的 ，text-align 是 不 会 有 作用 的 。 这 里 之 所 以 
产生 了 位 置 变 化 ， 本 质 上 是 “幽灵 空白 节点 ”和 * 无 依赖 绝对 定位 ?共同 作 
用 的 结果 。 











具体 的 演 染 原理 如 下 。 


(1) 由 于 <img> 是 内 联 水 平 ，<p> 标签 中 存在 一 个 宽度 为 89、 看 不 
见 摸 不 着 的 “幽灵 空白 节点 >”， 也 是 内 联 水 平 ， 于 是 受 text- 
align:center 影响 而 水 平 居 中 显示 。 








(2) <img> 设置 了 position:absolute ， 表 现 为 “无 依赖 绝对 定 
位 ”因此 在 “幽灵 空 日 节点 ”后 面 定位 显示 ; 同时 由 于 图 片 不 占据 空 
间 ， 这 里 的 “幽灵 空白 节点 ”当仁不让 ， 正 好 在 <p> 元 素 水 平 中 心 位 置 显 
示 ， 于 是 我 们 就 看 到 了 图 片 从 <p> 元 素 水 平 中 间 位 置 最 示 的 效果 。 

















这 是 非常 简约 的 定位 表现 。 此 时 ， 我 们 只 要 margin-left 一 半 图 
片 宽度 负 值 大 小 ， 就 可 以 实现 图 片 的 水 平 居中 效果 了 ， 与 父 元 
素 position:relative 然后 定位 元 素 设置 1eft :56% 的 方法 相 比 ， 其 
优势 在 于 不 需要 改变 父 元 素 的 定位 属性 ， 避 人 免 可 能 不 希望 出 现 的 层级 问 





村 





然而 ，IE 浏 览 器 的 支持 不 一 样 导 致 此 方法 的 场景 实用 性 打 了 折扣 。 
当然 ， 有 小 技巧 可 以 使 所 有 浏览 器 都 完美 文 持 ， 如 果 只 需要 兼容 正 
Edge《“ 移 动 端 开发 时 候 ) ， 额 外 加 下 面 这 一 段 CSS 语 句 就 可 以 了 : 


p:before { 
content: "" 


} 





如 果 和 希望 兼容 IE8 浏 览 句 ， 则 CSS 代 码 还 要 再 多 一 点 儿 : 


pl 

text-align: center; 

font-size: .1px; 

font-size: -webkit-calc(1ipx - 1px); 
} 
p:before { 

content: '\2802'; 


img { 


position: absolute; 


} 





其 中 ，\2882 表示 茶 一 种 空格 。 通 过 插入 显 式 的 内 联 字符 ， 而 非 借 
助 冉 渺 的 “幽灵 空白 市 扩 ” 实 现 所 有 浏览 费 下 的 一 臻 表现 。 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/6/5-9.php 或 者 扫 右 侧 的 
二 维 码 。 

















需要 注意 的 是 ， 只 有 原本 是 内 联 水 平 的 元 素 绝对 定位 后 可 以 受 
text- align 属性 影响 ， 这 不 难 理解 ， 因 为 块 级 元 素 的 “无 依赖 绝对 定 
位 ?是 掉 在 下 面 显示 的 ， 水 平方 向 上 并 无 可 “依赖 ”的 内 联 元 素 ，text- 
align 属性 自然 其 长 英 及 。 














按照 我 的 经 验 ， 利 用 text-align 控制 absolute 元 素 的 定位 最 适 
合 的 使 用 场景 融 是 主 窗 体 右 侧 的 “返回 顶部 ”以 及 “反馈 ?等 小 布局 的 实 
现 。 例 如 ，http://demo. cssworld.cn/6/5-10.php 对 应 的 实例 页 面 效 果 ， 核 
心 区 域 如 图 6-60 所 示 。 图 6-60 所 示 的 效果 的 核心 HTML 和 CSS 代 码 如 


下 
反馈 


图 6-60 ” 主 结 构 右 外 侧 固 定 定位 布局 示意 




















<div class="alignright"> 
<span class="follow"></span> 


</div> 

.alignright { 
height: ©; 
text-align: right; 
overflow: hidden; 


.alignright:before { 
content: "”\2002 ”; 


} 

.follow { 
position: fixed; 
bottom: 1066px; 
z-index: 1; 


} 





使 用 :before 伪 元 素 在 前 面 插 入 一 个 空格 ， 此 时 .alignright 设 
置 text-align:right， 则 此 空格 对 齐 主 结构 的 右边 缘 显 示 ， 后 面 的 固 
定 定位 元 素 〔( 同 绝对 定位 元 系 〉 由 于 “无 依赖 定位 ”特性 ， 左 边缘 正好 束 
是 主 结构 的 右边 缘 ， 天 然 跑 到 主 结构 的 外 面 显 示 了 ， 而 这 个 效果 正 是 固 
定 在 右 下 角 的 “返回 项 部 ”以 及 “反馈 ”小 按钮 布局 需要 的 效果 。 








此 方法 兼容 性 很 好 ， 层 级 单纯 ， 唯 一 的 问题 就 是 插入 了 一 个 空格 ， 
会 占据 一 定 的 高 度 ， 这 是 不 推荐 的 ， 最 好 就 是 有 没有 “返回 顶部 ”等 元 素 
都 不 影响 主 结构 的 布局 。 所 以 ， 我 们 要 把 占据 的 高 度 抹 掉 ， 方 法 很 简 
单 ， 设 置 height: 8 同时 overflow:hidden 即 可 。 














此 时 ， 有 人 可 能 会 惊 呼 : 什么 ? 设置 height:0 同时 
overflow:hidden ? 那 岂 不 是 里 面 所 有 元 素 都 被 剪裁 看 不 见 啦 ? 


如 果 是 普通 元 素 确 实 会 如 此 ， 但 是 对 于 absolute 绝对 定位 以 及 
fixed 固定 定位 元 素 ， 规 则 要 更 复杂 ! 





6.6 absolute 与 overf1low 





overflow 对 absolute 元 素 的 剪裁 规则 用 一 句 话 表述 束 是 : 绝对 
定位 元 素 不 总 是 被 父 级 overflow 属性 剪裁 ， 尤 其 当 overflow 在 绝对 
位 元 素 及 其 包含 块 之 间 的 时 候 。 





上 面 这 人 句 话 是 官方 文档 的 直译 ， 似 乎 还 是 有 些 抛 口 ， 我 们 再 换 一 种 
方法 表述 就 是 :， 如果 overflow 不 是 定位 元 素 ， 同 时 绝对 定位 元 素 和 
overflow 容器 之 间 也 没有 定位 元 素 ， 则 overflow 无 法 对 absolute 了 
素 进行 剪裁 。 





因此 下 面 HTML 中 的 图 片 不 会 被 剪裁 : 


<div style="overflow: hidden; "> 
<img src="1.jpg" style="position: absolute;"> 


</div> 








overflow 元 素 父 级 是 定位 元 系 也 不 会 剪裁 ， 例 如 : 


<div style="position: relative;"> 
<div style="overflow: hidden;"> 
<img src="1.jpg" style="position: absolute;"> 
</div> 
</div> 





但 是 ， 如 果 overflow 属性 所 在 的 元 素 同 时 也 是 定位 元 素 ， 里 面 的 
绝对 定位 元 素 会 被 剪裁 : 





<div style="overflow: hidden; position: relative;"> 
<img src="1.jpg" style="position: absolute;"> <!-- 前 裁 --> 
</div> 


[L 


如 果 overflow 元 素 和 绝对 定位 元 素 之 间 有 定位 元 素 ， 也 会 被 剪 
裁 : 





<div style="overflow: hidden;"> 
<div style="position: relative;"> 
<img src="1.jpg" style="position: absolute;"> <!-- 前 裁 --> 


</div> 
</div> 





如 果 overflow 的 属性 值 不 是 hidden 而 是 auto 或 者 scroll ， 即 使 
绝对 定位 元 素 高 宽 比 overf1low 元 素 高 宽 还 要 大 ， 也 都 不 会 出 现 深 动 
条 。 例 如 ， 下 面 的 HTML 和 CSS 代 码 : 





<div class="box"> 
<img src="1.jpg"> 

</div> 

.box { 
width: 366px; height: 166pX; 
background-color: #f6f3f9; 
overflow: auto; 


} 

.box > img { 
width: 256px; height: 192px; 
position: absolute; 


} 





图 乒 高 度 256px 比 容器 .box 高 度 198px 明显 高 出 了 一 截 ， 但 是 ， 
没有 滚动 条 出 现 。 





实际 开发 的 时 候 ， 绝 对 定位 元 素 和 非 绝 对 定位 元 素 往 往 可 能 混杂 在 
一 起 ， 虽 然 绝 对 定位 元 素 不 能 让 滚动 条 出 现 ， 但 是 非 绝 对 定位 元 素 可 
以 ， 于 是 ， 就 可 能 出 现 另 外 一 种 很 有 特色 的 现象 ， 即 当 容 器 滚动 的 时 








修 ， 绝 对 定位 元 素 微 丝 不 动 ， 不 跟着 深 动 ， 表 现 类 似 fixed 固定 定位 ， 
如 图 6-61 所 示 ， 深 动 到 尖 和 深 动 到 尾 ， 图 片 的 位 置 都 是 一 样 的 。 眼 见 为 
实 ， 手 动 输入 http://demo.cssworld.cn/6/5-11.php 或 者 扫 下 面 的 二 维 码 。 








图 6-61 绝对 定位 元 素 不 跟随 滚动 示意 


最 后 ， 非 常 有 必要 补充 一 点 ， 那 就 是 由 于 position:fixed 固定 定 
位 元 素 的 包含 块 是 根 元 素 ， 因 此 ， 除 非 是 窗 体 滚 动 ， 否 则 上 面 讨论 的 所 
有 overflow 剪裁 规则 对 固定 定位 都 不 适用 。 这 一 点 后 面 还 会 提 及 。 








了 解 这 些 特性 有 什么 用 呢 ? 





作用 一 是 解决 实际 问题 。 例 如 上 一 节 最 后 “返回 顶部 ”的 案例 ， 保 证 
高 度 为 6 ， 同 时 里 面 的 定位 内 容 不 会 被 剪裁 ， 或 者 在 局 部 滚动 的 容器 中 
人 fixed 的 效果 。 作 用 二 是 在 遇 到 类 似 现象 的 时 候 知 

道 问 题 所 在 ， 可 以 “对 症 下 药 ”， 快速 解决 问题 。 

















然而 ， 虽 然 实际 开发 的 时 候 ， 对 于 局 部 滚动 ， 我 们 经 常会 有 元 素 不 
跟随 深 动 的 需求 ， 如 表 头 固定 ， 但 是 从 可 维护 性 的 角度 讲 ， 建 议 还 是 将 
这 个 表 头 元 素 移动 到 滚动 容器 外 进行 模拟 ， 因 为 我 们 总 会 不 小 心 在 某 一 
层 标签 添加 个 类 似 position:relative 的 声明 ， 此 时 ， 原 本 的 不 跟随 
滚动 的 表 头 会 因为 包含 块 的 变化 变 得 可 以 滚动 了 ， 这 显然 是 我 们 不 愿意 
看 到 的 。 当 然 ， 如 果 HTML 结 构 被 限制 无 法 修改 ， 则 利用 overflow 深 
动 absolute 元 素 不 深 动 的 特性 来 实现 表 尖 固定 的 效果 则 是 上 上 之 选 ， 
会 让 人 眼前 一 亮 ! 





在 CSS 世 界 中 ， 上 面 说 的 这 些 几 乎 都 是 完美 无 瑕 的 ， 但 是 ， 随 着 
CSS3 新 世界 到 来 的 冲击 ， 规 则 在 不 经 意 间 发 生 了 一 些 变 化 ， 其 中 最 明 
显 的 就 是 transform 属性 对 overflow 剪裁 规则 的 影响 ，CSS3 新 世界 中 
transform 属性 似乎 扮演 了 原本 “定位 元 素 ” 的 角色 ,但 是 这 种 角色 扮演 
并 不 完全 。 什 么 意思 呢 ? 我 们 先 看 下 面 我 统计 的 出 现 transform 属性 时 
overflow 剪裁 绝对 定位 元 素 的 数据 。 











overflow 元 素 自 身 transform : 


。IE9 及 以 上 版 本 浏览 器 、Firefox 和 Safari (OS X、iOS) 剪裁 ; 
。 Chrome 和 Opera 不 剪裁 。 


overflow 子 元 素 transform : 


e。 IE9 及 以 上 版 本 浏览 器 、Firefox 和 Safari (OS X、iOS) 剪裁 ; 
。 Chrome 和 Opera 剪 裁 。 


可 以 看 到 overflow 元 素 自 身 transform 的 时 候 ，Chrome 和 Opera 
浏览 器 下 的 overflow 剪裁 是 无 效 的 ， 这 是 唯一 和 有 定位 属性 时 的 
overflow 剪裁 不 一 样 的 地 方 ， 因 此 才 有 “角色 扮演 并 不 完全 ”的 说 法 。 





transform 除了 改变 overflow 属性 原 有 规则 ， 对 层 琶 上 下 文 以 及 
position:fixed 的 演 染 都 有 影响 。 因 此 ， 当 大 家 遇 到 absolute 元 素 
被 剪裁 或 者 fixed 固定 定位 失效 时 ， 可 以 看 看 是 不 是 transform 属性 在 
信守 。 


6.7 absolute 与 cLip 
CSS 世 界 中 有 些 属性 或 者 特性 必须 和 其 他 属性 一 起 使 用 才 有 效 ， 比 


方 说 剪裁 属性 clip 。clip 属性 要 想起 作用 ， 元 素 必须 是 绝对 定位 或 者 
固定 定位 ， 也 就 是 position 属性 值 必须 是 absolute 或 者 fixed 。 








clip 属性 语法 如 下 : 


clip: rect(top right bottom left) 


实际 上 ， 标 准 语法 应 该 是 


clip: rect(top, right, bottom, left) 


但 是 我 个 人 还 是 习惯 使 用 没有 逗号 的 语法 ， 因 为 其 兼容 性 更 好 ， 
IE6 和 IE7 也 支持 ， 而 且 字 符 更 少 。 


就 顺序 而 言 ，top>right3bottom>left 在 CSS 世 界 中 是 一 脉 相 承 
的 ， 和 margin / border-width 等 属性 的 4 个 值 的 顺序 一 样 ， 都 是 从 top 
开始 ， 顺 时 针 旋 转 。 不 过 这 里 的 4 个 值 有 一 个 明显 不 一 样 的 地 方 ， 就 是 
不 能 缩写 ， 且 和 border-width 类 似 ， 是 不 支持 百分比 值 的 。 


那 有 基体 是 如 何 檀 裁 的 呢 ? 我 们 看 一 个 例子 ，CSS 如 下 : 


clip: rect(36px 266pXx 2660px 28px) 


可 以 想象 ， 我 们 手中 有 一 把 剪刀 ， 面 前 有 一 块 画布 ，rect(36px 
266px 266px 26px) 表示 的 含义 就 是 : 距离 画布 上 边缘 36px 的 地 方 剪 
一 刀 ， 上 距离 画布 右边 缘 269px 的 地 方 前 一刀， 距离 画布 下 边缘 266px 的 
地 方 前 一刀 ， 距 离 画布 左边 缘 28px 的 地 方 前 一刀。 最 终 我 们 就 得 到 一 
个 新 的 剪裁 好 的 矩形 画布 ， 如 图 6-62 所 示 。 














图 6-62 ”画布 剪裁 示意 


6.7.1 重新 认识 的 clip 属性 


非常 多 的 人 都 不 知道 CSS 中 还 有 抱 大 腿 的 clip 剪裁 属性 ， 束 算 见 
到 ， 也 认为 它 是 一 个 非常 冷门 、 生 个 的 CSS 属 性 ， 作 用 和 价值 不 大 。 实 
际 上 ，clip 剪裁 非常 有 用 ， 在 以 下 两 种 场景 下 具有 不 可 蔡 代 的 地 位 。 























1. fixed 固定 定位 的 剪裁 


对 于 普通 元 素 或 者 绝对 定位 元 素 ， 想 要 对 其 进行 剪裁 ， 我 们 可 以 利 
用 语义 更 明显 的 overflow 属性 ， 但 是 对 于 position:fixed 元 
素 ，overflow 属性 往往 就 力 不 能 及 了 ， 因 为 fixed 固定 定位 元 素 的 包 
含 块 是 根 元 素 ， 除 非 是 根 元 素 深 动 条 ， 普 通 元 素 的 overflow 是 根本 无 
法 对 其 进行 剪裁 的 。 怎 么 办 呢 ? 





此 时 就 要 用 到 名 不 经 传 的 clip 属性 了 。 再 器 张 的 固定 定位 ，clip 
属性 也 能 立马 将 它 甬 裁 得 服 服 帖 帖 的 。 例 如 : 


.fixed-clip { 
position: fixed; 


clip: rect(36px 200px 2660px 20pX) 
} 





2. 最 佳 可 访问 性 隐藏 








所 谓 “ 可 访问 性 隐藏 >， 指 的 是 虽然 内 容 肉眼 看 不 见 ， 但 是 其 他 辅助 
设备 却 能 够 进行 识别 和 访问 的 隐藏。 


举 个 例子 ， 很 多 网 站 左上 角 都 有 包含 自己 网 站 名 称 的 标识 
(logo) ， 而 这 些 标识 一 般 都 是 图 片 ， 为 了 更 好 地 SEO 以 及 无 障碍 识 
别 ， 我 们 一 般 会 使 用 <h1> 标签 写 上 网 站 的 名 称 ， 代 码 如 下 : 





<a href="/”class="1o8go"> 
<h1>CSSs 世 界 </h1> 








</a> 





如 何 隐 藏 <ch1> 标 签 中 的 “CSS 世界 ”这 几 个 文字 ， 通 常 有 以 下 一 些 技 





。 下 策 是 display:none 或 者 visibility:hidden 隐藏 ， 因 为 屏 
阅读 设备 会 忽略 这 里 的 文字 。 

。 text-indent 缩 进 是 中 策 ， 但 文字 如 果 缩 进 过 大 ， 大 到 屏 
外 ， ee 

。 color:transparent 是 移动 端 上 策 ， 但 却 是 果 面 端 中 策 ， 因 为 原 
生 IE8 浏 览 器 并 不 支持 它 。color:transparent 声明 ， jp 
的 方式 阻止 文本 被 框 选 。 

。 clip 坟 裁 隐藏 是 上 策 ， 既 满足 视觉 上 的 隐藏 ， 屏 大 阅读 设备 等 辅 
助 设备 也 支持 得 很 好 。 








.logo hi { 
position: absolute; 


clip: rect(60 60 0 0); 
} 








clip 剪裁 被 我 称 为 “最 佳 可 访问 性 隐藏 * 的 另外 一 个 原因 就 是 ， 它 
具有 更 强 的 普遍 适应 性 ， 任 何 元 素 、 任 何 场景 都 可 以 无 障碍 使 用 。 例 
如 ， 我 定义 一 个 如 下 的 CSS 语 句 块 : 











.Clip { 
position: absolute; 
clip: rect(60 60 9 0); 


} 








就 可 以 整 站 使 用 ， 哪 里 怖 要 “可 访问 性 隐藏 "就 加 一 个 类 名 .clip 即 可 ， 
无 论 是 图 片 、 文 字 还 是 块 级 元 系 ， 痢 可 以 满足 隐藏 需求 (与 文字 透明 、 
缩 进 等 方法 相 比 ) 。 同 时 ，clip 语法 简单 ， 功 能 单一 ， 与 其 他 CSS 属 
性 相 比 ， 和 元 素 原 本 CSS 样 式 冲突 的 概率 更 低 。 





不 仅 如 此 ， 元 素 原 本 的 行为 特性 也 很 好 用 。 例 如 ， 依 然 可 以 被 
focus ， 而 且 非 常 难得 的 是 束 地 可 裁 ， 因 为 属于 “无 依赖 的 绝对 定位 ”。 
这 一 点 很 重要 ， 我 们 来 看 下 面 这 个 实用 案例 。 











众所周知 ， 如 果 <form> 表单 元 素 里 面 有 一 个 type 为 submit 或 
者 image 类 型 的 按钮 ， 那 么 表单 自动 有 回 车 提交 行为 ， 可 以 节约 大 量 哆 
嗓 的 键盘 相关 的 事件 的 代码 。 但 是 ，submit 类 型 按钮 在 IE7 下 有 黑 框 ， 
很 难 所 有 浏览 器 〈 包 括 Firefox 在 内 的 浏览 器 ) UI 完 全 一 致 ， 对 视觉 呈现 
是 个 一 挑战 。 于 是 就 有 了 下 面 这 个 使 用 <label> 元 素 李 代 桃 伪 的 经 典 策 
略 : 

















<form> 
<input type="submit" id="someID" class="clip"> 


<label for="someID"> 提 交 </1label> 





原本 的 submit 按钮 隐藏 ， 肉 眼 所 见 的 按钮 UI 实际 上 是 <label> 标 
签 演 染 。 由 于 <label> 是 非 蔡 换 元 素 ， 没 有 内 置 的 UI， 因 此 兼容 性 非 沉 
好 。 


这 里 使 用 的 clip 剪裁 隐藏 是 我 工作 这 么 多 年 大 浪 淘 沙 筛选 后 的 最 
佳 实践 ， 有 对 比 才能 显 出 好 在 何 处 。 





。display:none 或 者 visibility:hidden 隐藏 有 两 个 问题 ， 一 个 
是 按钮 无 法 被 focus 了 ， 男 外 一 个 是 IE8 浏 览 器 下 提交 行为 丢失 ， 
原因 应 该 与 按钮 focus 特性 丢失 有 关 。 

透明 度 9 履 盖 也 是 一 个 不 错 的 实践 。 如 果 是 移动 端 项 目 ， 建 议 这 人 么 
做 ;但 如 果 是 桌面 端 项 目 ， 则 完全 没有 必要 。 使 用 透明 度 6 履 盖 的 
问题 是 每 一 个 场景 都 需要 根据 环境 的 不 同 重 新 定位 ， 以 保证 点 击 区 
域 的 准确 性 ， 成 本 较 高 ， 但 clip 隐藏 直接 用 一 个 类 名 加 一 下 就 
好: 

还 有 一 种 比较 具有 适用 性 的 “可 访问 隐藏 "是 下 面 这 种 屏幕 外 隐藏 : 

















.abs-out { 
position: absolute; 
left: -999px; top: -999px; 


} 





然而 ， 在 本 例 中 ， 会 出 现 一 个 比较 麻烦 的 问题 。 在 6.4 节 讲 过 ， 当 
一 个 控件 元 素 被 focus 的 时 候 ， 浏 览 器 会 自动 改变 深 动 高 上 度 ， 让 这 个 控 
件 元 素 在 屏幕 内 显示 。 假 如 说 我 们 的 <label>“ 提 交 ” 按 钮 在 第 二 屏 ， 则 
点 击 按钮 的 时 候 浏览 器 会 自动 跳 到 第 一 屏 置 项 ， 因 为 按钮 隐藏 在 了 屏幕 
外 ， 于 是 发 生 了 非常 糟糕 的 体验 问题 。 而 clip 就 地 剪裁 ， 就 不 会 有 “页 
面 跳动 ”的 体验 问题 。 于 是 ， 权 衡 成 本 和 效果 ，clip 隐藏 成 为 了 最 佳 选 
择 ， 特 别 是 对 于 桌面 端 项 目 。 

















6.7.2 深入 了 解 clip 的 泻 染 





上 面 关于 clip 的 知识 多 浮 于 表层 ， 如 果 我 们 进一步 深入 ， 去 尝试 
了 解 clip 属性 是 如 何 泻 染 的 ， 就 会 发 现 一 些 有 意思 的 事情 ! 


我 们 先 看 一 个 示例 : 


.box { 
width: 366px; height: 166pX; 
background-color: #f06f3f9; 
position: relative; 
overflow: auto; 


} 

.box > img { 
width: 256px; height: 192px; 
position: absolute; 








此 时 .box 为 定位 元 素 ， 因 此 ， 深 动 条 显示 得 很 好 ， 如 图 6-63 所 


如 果 对 图 片 进行 clip 勇 裁 ， 那 效果 又 将 怎样 呢 ? 


.box > img { 
width: 256px; height: 192px; 
position: absolute; 
clip: rect(6 60 0 909); 

} 





图 片 显然 看 不 见 了 ， 但 是 注意 ， 在 Chrome 浏 览 器 下 ，.box 元 素 的 
滚动 条 依旧 存在 ， 如 图 6-64 所 示 。 








图 6-63 ”绝对 定位 图 片 可 滚动 


bb 





图 6-64 ”Chrome 下 绝对 定位 图 片 clip 隐藏 后 依旧 可 滚动 


这 个 现象 很 有 意思 ， 它 说 明 ， 至 少 在 Chrome 浏 览 嚣 下 ，clip 仅仅 
是 决定 了 哪 一 部 分 是 可 见 的 ， 对 于 原来 占据 的 空间 并 无 影响 。 然 而 ， 并 
不 是 所 有 浏览 器 都 这 么 认为 ， 在 下 和 Firefox 浏 览 器 下 是 没有 滚动 条 的 ， 
只 有 光秃秃 的 一 小 撮 背 景色 在 那里 。 这 又 是 “未 定义 行为 ”的 表现 ， 看 起 
来 IE 和 Firefox 对 于 clip 演 染 采用 的 是 男 外 的 方式 。 











但 是 无 论 怎样 ， 下 面 这 些 特 性 大 家 的 认识 都 是 一 致 的 : 使 用 clip 
进行 剪裁 的 元 素 其 clientWidth 和 clientHeight 包括 样式 计算 的 宽 高 
都 还 是 原来 的 大 小 ， 从 这 一 点 看 ，Chrome 的 泻 染 似乎 更 合理 。 虽 然 尺 
寸 还 是 原来 的 尺寸 ， 但是， 隐藏 的 区 域 是 无 法 影响 我 们 的 点 击 行为 的 ， 
说 明 clip 隐藏 还 是 很 干脆 的 。 








最 后 总 结 一 下 : clip 隐藏 仅仅 是 决定 了 哪 部 分 是 可 见 的 ， 非 可 见 
部 分 无 法 啊 应 点 击 事件 等 ， 然 后 ， 虽 然 视 觉 上 隐藏 ， 但 是 元 素 的 尺寸 依 
然 是 原本 的 尺寸 ， 在 下 浏览 器 和 Firefox 浏 览 器 下 抹 掉 了 不 可 见 区 域 尺寸 
对 布局 的 影响 ，Chrome 浏 览 器 却 保 留 了 。 

















Chrome 浏 览 器 的 这 种 特性 表现 实际 上 让 clip 隐藏 有 了 瑕 疫 ， 好 在 
通常 使 用 场景 是 看 不 到 这 个 差异 的 ， 故 影响 甚 微 。 


6.8 ”absolute 的 流体 特性 


6.8.1 当 absolute 过 到 left/top/right/bottom 属性 


当 absolute 过 到 left/top/right/bottom 属性 的 时 
候 ，absolute 元 素 才 真正 变 成 绝对 定位 元 素 。 例 如 : 





.box { 
position: absolute; 


left: 8; top: 60; 
} 





表示 相对 于 绝对 定位 元 素 包 含 块 的 左上 角 对 齐 ， 此 时 原本 的 相对 特性 于 
失 。 但 是 ， 如 果 我 们 仅 设 置 了 一 个 方向 的 绝对 定位 ， 又 会 如 何 呢 ? 例 
如 : 





.box { 
position: absolute; 
left: ©@; 


} 








此 时 ， 水 平方 向 绝对 定位 ， 但 垂直 方向 的 定位 依然 保持 了 相对 特性 。 
6.8.2 ” absolute 的 流体 特性 


说 到 流体 特性 ， 我 们 通常 第 一 反应 束 是 <div> 之 类 的 普通 块 级 元 
素 。 实 际 上 ， 绝 对 定位 元 系 也 具有 类 似 的 流体 特性 ， 妆 然 ， 不 是 默认 就 
有 的 ， 而 是 在 特定 条 件 下 才 上 共有， 这 个 条 件 就 是 “对 立方 同 同时 发 生 害 
位 的 时 候 ”。 








left/top/right/bottom 是 具有 定位 特性 元 素 专 用 的 CSS 属 性 ， 
其 中 left 和 right 属于 水 平 对 立定 位 方向 ， 而 top 和 bottom 属于 垂直 














对 并 定位 方 同 。 








当 一 个 绝对 定位 元 素 ， 其 对 立定 位 方 同属 性 同时 有 基体 定 位 数值 的 
时 候 ， 流 体 特 性 就 发 生 了 。 例 如 : 
<div class="box"></div> 


.box { 
position: absolute; 


left: 8; right: 6; 


} 





如 果 只 有 left 属性 或 者 只 有 right 属性 ， 则 由 于 包 里 性 ， 此 
时 .box 宽度 是 8 。 但 是 在 本 例 中 ， 因 为 left 和 right 同时 存在 ， 所 以 
宽度 就 不 是 6 ， 而 是 表现 为 “格式 化 宽度 ”， 宽 度 大 小 上 自 适 应 于 .box 包含 
块 的 padding box， 也 就 是 说 ， 如 果 包 含 块 padding box 宽 度 发 生变 
化 ，.box 的 宽度 也 会 跟着 一 起 变 。 








因此 ， 假 设 .box 元 素 的 包含 块 是 根 元 素 ， 则 下 面 的 代码 可 以 
让 .box 元 素 正 好 完全 履 盖 浏览 器 的 可 视窗 口 ， 并 且 如 果 改 变 浏 览 器 窗 
口 大 小 ，.box 会 自动 跟着 一 起 变化 : 





.box { 
position: absolute; 
left: 8; right: 6; top: 6;j bottom: ©; 


} 





绝对 定位 元 际 的 这 种 流体 目 适 应 特性 从 下 7 就 开始 文 持 了 ， 但 是 出 
于 历史 习惯 或 者 其 他 什么 原因 ， 很 多 同行 依然 使 用 下 面 这 样 的 写法 : 


.box { 
position: absolute; 








left: 6; top: 60; 
width: 166%; height: 166%; 
} 





好 像 也 能 履 兰 浏览 右 的 可 视窗 口 ， 并 且 用 得 挺 好 。 那 问题 来 了 : 这 
两 种 实现 有 什么 区 别 呢 ? 


乍 一 看 ， 效 果 都 是 一 样 的 ， 但 是 骨子里 却 已 经 严重 分 化 了 。 后 者 ， 
也 就 是 设 定 宽 高 都 是 166% 的 那个 .box， 实际 上 已 经 完全 丧失 了 流动 
性 ， 我 们 可 以 通过 添加 简单 的 CSS 声 明 让 大 家 一 眼 就 看 出 差别 。 例 如 ， 
对 两 者 都 添加 padding:38px : 














.box { 
position: absolute; 
left: 8; right: 6; top: 6;j bottom: ©; 
padding: 36pX; 


.box { 
position: absolute; 
left: 6; top: 60; 
width: 166%; height: 166%; 
padding: 36pX; 








前 者 此 时 宽 高 依然 是 窗 体 可 视 区 域 的 宽 高 ， 但 是 ， 后 者 此 时 的 尺寸 
是 166%+66px ， 多 出 了 686px 。 有 人 可 能 会 立马 想到 使 用 box- 
sizing:border-box ， 这 样 确实 可 以 让 padding 表现 保持 一 致 ， 但 
是 ， 如 果 添 加 的 是 margin:36px 呢 ? 





.box { 
position: absolute; 
left: 8; right: 6; top: 8; bottom: ©; 
margin: 306px; 


} 
.box { 


position: absolute; 

left: 8; top: 60; 

width: 166%; height: 166%; 
margin: 36px; 











前 者 自动 上 下 左右 留 白 38px ， 但 是 后 者 的 布局 已 经 跑 到 窗 体外 面 
去 了 ， 并 不 支持 margin box 的 box-sizing 此 时 也 无 能 为 力 。 


通过 上 面 几 个 例子 可 以 看 到 ， 设 置 了 对 立定 位 属性 的 绝对 定位 元 素 
的 表现 神似 普通 的 <div> 元 素 ， 无 论 设 置 padding 还 是 margin ， 其 占 
据 的 空间 一 直 不 变 ， 变 化 的 就 是 content box 的 尺寸 ， 这 就 是 典型 的 流体 
表现 特性 。 

















所 以 ， 如 末 想 让 绝对 定位 元 素 宽 高 目 适 应 于 包含 块 ， 没 有 理由 不 使 
用 流体 特性 写法 ， 除 非 是 符 换 元 素 的 拉 伸 。 而 绝对 定位 元 素 的 这 种 流体 
特性 比 普 通 元 系 要 更 强大 ， 普 通 元 系 流 体 特性 只 有 一 个 方 回 ， 默 认 是 水 
平方 向 ， 但 是 绝对 定位 元 素 可 以 让 和 对 直方 向 和 水 平方 向 同时 保持 流动 
| 





有 人 可 能 还 没 意 识 到 垂直 方 同 也 保持 流动 性 的 好 处 ， 实 际 上 ， 其 对 
我 们 的 布局 非常 有 价值 。 举 个 最 简单 的 例子 ， 因 为 子 元 素 的 height 百 
分 比值 可 以 生效 了 (IE8 及 以 上 版 本 浏览 絮 〉 ， 所 以 高 度 目 适应 、 高 度 
等 比例 布局 等 效果 都 可 以 从 容 实现 了 。 











6.8.3 absolute 的 margin:auto 居中 


当 绝 对 定位 元 系 处 于 流体 状态 的 时 候 ， 各 个 盒 模 型 相关 属性 的 解析 
和 普通 流体 元 素 都 是 一 模 一 样 的 ，margin 负 值 可 以 让 元 素 的 尺寸 更 








大 ， 并 且 可 以 使 用 margin:auto 让 绝对 定位 元 素 保持 居中 。 


绝对 定位 元 素 的 margin:auto 的 填充 规则 和 普通 流体 元 素 的 一 模 
一 样 : 
。 如 果 一 侧 定 值 ， 一 侧 auto ，auto 为 剩余 空间 大 小 ; 
。 如果 两 侧 均 是 auto ， 则 平分 剩余 空间 。 


唯一 的 区 别 在 于 ， 绝 对 定位 元 素 margin:auto 居中 从 IE8 浏 览 器 开 
始 支持 ， 而 普通 元 素 的 margin:auto 居中 很 早 就 支持 了 。 





如 果 项 目 不 需 要 管 正 7 浏 览 右 的 话 ， 下 面 这 种 绝对 定位 元 素 水 平 牌 





直 居 中 用 法 就 可 以 直接 淘汰 了 : 


.element { 
width: 366px; height: 266pX; 
position: absolute; left: 562%; top: 56%; 
margin-left: -158px; /* 宽度 的 一 半 */ 
margin-top: -160px; /* 高 度 的 一 半 */ 





} 











如 果 绝 对 定位 元 素 的 尺寸 是 已 知 的 ， 也 没有 必要 使 用 下 面 这 种 用 
法 ， 因 为 按照 我 的 经 验 ， 在 有 些 场景 下 ， 白 分 比 transform 会 让 iOS 微 
信 闪 退 ， 还 是 尽量 避免 的 好 。 





.element { 
width: 366px; height: 266pX; 
position: absolute; left: 56%; top: 56%; 





transform: translate(-56%, -506%); /* 56% 为 自身 尺寸 的 一 半 */ 


} 








首 推 的 方法 就 是 利用 绝对 定位 元 率 的 流体 特性 和 margin:auto 的 
自动 分 配 特性 实现 居中 ， 例 如 : 


.element { 
width: 366px; height: 266pX; 
position: absolute; 
left: 8; right: 6; top: 68; bottom: ©; 


margin: auto; 


} 





具体 分 配 细节 在 4.3 节 已 经 详细 解释 ， 这 里 不 再 效 述 。 





我 可 以 负责 任 地 告诉 大 家 ， 这 种 方法 非常 好 用 ， 层 试 不 夹 。 


6.9 position:relative 才 是 大 哥 





如 果 说 float 和 absolute 是 同 父 异 母 的 兄弟 关系 ， 那 么 
position:relative (下 面 简称 relative) 则 是 absolute 的 杀 大 
哥 。 


故事 是 这 样 的 ; 当年 魔界 圣母 position 生 了 好 几 个 儿子 ， 其 中 一 
个 就 是 法 力 很 强 也 很 霸道 的 absolute ， 考 虑 到 日 后 absolute 会 
找 float 的 麻烦 而 去 正常 流 世 界 ， 以 其 个 性 和 堪 道 的 能 力 ， 一 定 会 影响 
正常 流 世 界 的 秩序 ， 于 是 圣母 position 让 其 性 格 敦 实 的 大 儿 
子 relative 直接 在 正常 流 世 界 生活 ， 帮 忙 盯 着 absolute ， 不 要 让 
absolute 这 个 小 魔鬼 到 处 卷 是 生 非 。 





知道 了 故事 背景 ， 对 relative 的 诸多 特性 我 们 就 很 好 理解 了 。 


6.9.1 _ relative 对 absolute 的 限制 


虽然 说 relative/absolute/fixed 都 能 对 absolute 的 “ 包 于 
性 ?以 及 “定位 ?产生 限制 ， 但 只 有 relative 可 以 让 元 素 依 然 保持 在 正常 
的 文档 流 中 。 就 好 像 虽 然 唐僧 、 观 世 音 车 院 、 如 来 佛祖 都 能 限制 孙 悟 
空 ， 但 只 有 唐僧 是 凡 界 中 的 凡人 ， 可 以 不 动 声 色 地 把 孙悟空 驯 教 得 服 服 
帖 帖 。 











下 面 举 个 简单 例子 示意 一 下 relative 对 absolute 的 限制 。 下 面 
的 CSS 代 码 之 前 出 现 过 ， 是 冲 着 履 盖 整个 浏览 器 可 视窗 体 去 的 ， 这 出 手 


.box { 
position: absolute; 


left: 8; right: 6; top: 6;j bottom: ©; 
} 





现在 有 如 下 的 小 图 标 样式 : 


.icon { 
width: 26px; height: 28px; 
position: relative; 


} 





并 且 HTML 结 构 关 系 如 下 : 


<div class="icon"> 
<div class="box"></div> 


</div> 





请 问 ， 此 时 .box 尺寸 多 少 ? 





原本 圭 气 的 窗 体 尺 寸 一 下 子 被 限制 到 这 里 的 小 不 汐 于 的 28pxx28px 
， 有 瞬间 从 天 上 掉 到 地 上 。 最 根本 的 原因 是 ， 此 时 .box 元 素 的 包含 块 变 
成 了 .icon 。 





6.9.2 relative 与 定位 
relative 的 定位 有 两 大 特性 : 一 是 相对 自身， 二 是 无 侵入 。 


故事 继续 。 话 说 absolute 被 relative 限制 得 没 脾气 ， 于 是 便 想 
尽 想 办 法 要 套套 其 大 哥 relative 的 技能 ， 看 看 有 没有 什么 漏洞 可 钻 。 


于 是 ， absolute 跑 过 去 找 relative ， 一 番 寒 蛤 后 开口 道 : “大 
哥 ， 听 三 弟 说 你 定位 技能 和 我 们 不 一 样 ， 我 想 看 看 ..……. 和 





“可 以 啊 ， 难 得 你 主动 找 我 ! ”relative 上 毫 不 犹 隐 地 答 道 。 
“ 那 好 ， 我 数 一 二 三 ， 然 后 我 们 同时 top :6; left:6 瞬 身 定位 。” 
yy 


只 上 听 “ 咱 ?的 一 声 ，absolute 瞬间 跑 到 了 结 界 的 左上 角 ， 很 是 得 
意 ， 此 时 absolute 发 现 其 大 哥 依然 原 地 不 动 ， 心 想 可 能 是 大 哥 技 能 发 
动 时 间 比 较 长 吧 。 然 后 5 分 钟 过 去 了 ，absolute 实在 忍 不 住 了 : “大 
哥 ， 你 怎么 还 不 定位 啊 ? ” 


“你 在 扯 什 么 啊 ， 我 早 就 已 经 left:6;top:6 定位 了 啊 ! ” 


absolute 的 额头 上 瞬间 挂 下 来 5 条 黑 线 和 一 滴 计 。 他 组 了 组 自己 的 
尴 人 类， 继续 道 : “和 那 我 们 换 成 同时 top :166px; Left:166px 定位 吧 ! ” 


“可 以 蚜 ! ” 
“ 那 好 ， 本 开始 ! 人 


只 听 “ 咱 "的 一 声 ，absolute 瞬间 跑 到 了 结 界 的 左上 角 166px 的 地 
方 ， 回 头 一 看 大 哥 ， 只 见 其 慢 悠悠 地 往 右 侧 和 下 方 各 移动 了 168px ( 见 
图 6-65) ! absolute 立马 竖 起 来 大 拇指 : “原来 大 哥 定 位 是 这 样子 的 
呀 ， 是 相对 于 自身 进行 偏 移 定位 的 ， 小 第 我 学 习 了 ! ” 














“其 实 不 眶 你 说 ， 这 是 为 了 限制 你 ， 我 特意 练 就 的 定位 ， 虽 然 活 动 
半径 小 了 点 儿 ， 但 是 为 了 看 好 你 ， 这 点 儿 牺 牲 是 值得 的 。 也 正 因为 这 
个 ， 我 被 世人 称 为 "相对 定位 *。?” 











人 ”absolute 的 额头 上 瞬间 又 多 了 几 根 黑 线 。 


“无 侵入 ”的 意思 是 ， 当 relative 进行 定位 偏 移 的 时 候 ， 一 般 情 况 
下 不 会 影响 周围 元 素 的 布局 。 








故事 继续 。absolute 后 来 仔细 回想 大 哥 的 定位 技能 ， 总 觉得 在 哪 
里 见 过 ， 后 来 总 算 想 起 来 ， 好 像 激进 的 margin 属性 定位 跟 大 哥 的 很 
像 ， 这 事情 有 必要 验证 一 下 。 于 是 数 日 后 ，absolute 威 丙 利诱 margin 
前 来 和 relative 进行 切磋 ， 而 自己 则 躲 在 暗中 观察 。 











relative 敦 实 厚 重 ， 与 人 为 善 ， 看 margin 前 来 自然 非常 欢迎 ， 于 
是 ， 就 有 了 下 面 切 磋 的 一 磋 ， 同 时 往 上 偏 移 58px 。 





切磋 开始 之 前 ， 大 家 位 置 什么 的 都 是 一 样 的 ， 如 图 6-66 所 示 。 


left:1OOpx 


top:iOOpx 








图 6-65 ”相对 自身 定位 偏 移 示意 


使 用 margin 定 位 使 用 relative 定 位 





点 击 图 片 应 用 .pk-1 ”点 击 图 片 应 用 .pk-2 


图 6-66 ” margin /relative 定位 的 初始 态 对 比 
margin 使 用 的 CSS 如 下 : 


.pk-1 { 
margin-top: -58px; 
} 





relative 则 是 : 


.pk-2 { 
position: relative; 
top: -50px; 


} 





作用 于 图 片上 ， 结 果 从 视觉 效果 看 ， 图 片 最 终 定位 的 位 置 是 一 样 
的 ， 但 是 ， 图 片 后 面 的 元 素 却 表现 出 了 明显 的 差异 : margin 定位 的 图 
片 后 面 的 文字 跟着 上 来 了 ， 而 使 用 relative 定位 的 图 片 后 面 的 文字 依 
然 在 原 地 纹 丝 不 动 ， 中 间 区 域 留 出 了 一 大 块 空 白 ， 如 图 6-67 所 示 。 眼 见 
为 实 ， 手 动 输入 http://demo.cssworld.cn/6/6-1.php 或 者 扫 下 面 的 二 维 码 。 














点 击 图 片 应 用 .pk-1 过 在 序 幸 性 于 
l ee a 
附着 四 片上 者 点 击 图 片 应 用 .pk-2 


图 6-67 margin/relative 定位 对 比 


relative 的 定位 还 有 另外 两 点 值得 一 提 : 相对 定位 元 素 的 
left/top/right/bottom 的 百分比 值 是 相对 于 包含 块 计算 的 ， 而 不 是 
自身 。 注 意 ， 虽 然 定 位 位 移 是 相对 自身 ， 但 是 百分比 值 的 计算 值 不 是 。 








top 和 bottom 这 两 个 垂直 方 同 的 百分比 值 计 算 跟 height 的 百分比 
值 是 一 样 的 ， 都 是 相对 高 度 计 算 的 。 同 时 ， 如 果 包 含 块 的 高 度 是 auto 
， 那 么 计算 值 是 6 ， 偏 移 无 效 ， 也 就 是 说 ， 如 果 父 元 素 没 有 设 定 高 度 或 
者 不 是 “格式 化 高 度 ”， 那 么 relative 类 似 top :26% 的 代码 等 同 于 
top:6 。 

















当 相 对 定位 元 素 同 时 应 用 对 立方 向 定位 值 的 时 候 ， 也 就 
是 top/bottom 和 left/right 同时 使 用 的 时 候 ， 其 表现 和 绝对 定位 差 
异 很 大 。 绝 对 定位 是 尺寸 拉 伸 ， 保 持 流体 特性 ， 但 是 相对 定位 却 是 “你 
死 我 活 ” 的 表现 ， 也 就 是 说 ， 只 有 一 个 方 同 的 定位 属性 会 起 作用 。 而 识 
强 就 弱 则 是 与 文档 流 的 顺序 有 关 的 ， 默 认 的 文档 流 是 自 上 而 下 、 从 左 往 
右 ， 因 此 top/bottom 同时 使 用 的 时 候 ，bottom 被 干 挤 ; left/right 
同时 使 用 的 时 候 ，right 综 命 。 














.example { 
position: relative; 
top: 16px; 
right: 16px; /* 无 效 */ 


bottom: 16px; /* 无 效 */ 
left: 16px; 





6.9.3 ”relative 的 最 小 化 影响 原则 














“relative 的 最 小 化 影响 原则 ”是 我 自己 总 结 的 一 套 更 好 地 布局 实 
践 的 原则 ， 主 要 分 为 以 下 两 部 分 : 





(1) 尽量 不 使 用 relative ， 如 果 想 定位 茶 些 元 系 ， 看 看 能 人 否 使 
用 “无 依赖 的 绝对 定位 ”; 





(2) 如 果 场 景 受 限 ， 一 定 要 使 用 relative ， 则 该 relative 务必 
最 小 化 。 








第 一 点 前 文 有 重点 介绍 ， 应 该 很 好 理解 ， 关 键 是 第 二 


点 , “relative 最 小 化 ”是 什么 意思 ? 


我 们 可 以 看 一 个 简单 的 例子 。 例 如 ， 我 们 希望 在 某 个 模块 的 右上 和 角 
定位 一 个 图 标 ， 初 始 HTML 结 构 如 下 : 


<div> 


<img src="icon.png"> 
<p> 内 容 1</py> 
<p> 内 容 2</py> 


<p> 内 容 3</py> 
<p> 内 容 4</py> 





</div> 





如 果 让 大 家 去 实现 的 话 ， 我 估计 十 有 八 九 都 会 如 下 面 这 样 实现 : 


<div style="position:relative;"> 
<img src="icon.png”style= 
"position:absolute;top:6;right:6; "> 
<p> 内 容 1</py> 
<p> 内 容 2</py> 
<p> 内 容 3</py> 
<p> 内 容 4</py> 





</div> 





但 是 ， 如 果 采 用 “relative 的 最 小 化 影响 原则 ” 则 应 该 是 如 下 面 这 
般 实现 : 





<div> 
<div style="position:relative;"> 


<img src="icon.png”style="position:absolute;itop:6;right:6;"> 
</div> 
<p> 内 容 1</py> 
<p> 内 容 2</py> 
<p> 内 容 3</py> 
<p> 内 容 4</py> 





</div> 





差别 在 于 ， 此 时 relative 影响 的 元 素 只 是 我 们 的 图 标 ， 后 面 的 “内 
容 1" 之 类 的 元 素 依 然 保 持 开 始 时 干净 的 状态 。 





有 人 可 能 会 有 疑问 : 为 什么 要 多 此 一 举 呢 ? 之 前 的 实现 效果 人 蛋 好 
的 ， 大 家 都 这 么 使 用 的 ， 不 照样 脸 上 洋 淤 着 灿烂 的 笑容 ! 





真 的 是 这 样 吗 ? 我 想 大 家 或 多 或 少 都 经 历 过 一 些 关 于 层级 的 问题 ， 
在 大 部 分 场景 下 ， 上 面 的 两 种 实现 并 没有 什么 差异 ， 但 是 页 面 一 旦 复 
杂 ， 第 一 种 实现 方法 就 会 留 下 隐患 。 因 为 一 个 普通 元 素 变 成 相对 定位 元 
素 ， 看 上 去 长 相 什么 的 没有 变化 ， 但 是 实际 上 元 素 的 层 县 顺序 提高 
甚至 在 IE6 和 IE7 浏 览 器 下 无 须 设置 z-index 就 直接 创建 了 新 的 层 有 上 下 
文 ， 会 导致 一 些 绝 对 定位 浮 层 无 论 怎么 设置 z-index 都 会 被 其 他 元 素 履 
。 当然 ，z-index 无 效 己 经 算是 比较 严重 的 问题 了 。 


























这 里 我 们 不 妨 看 一 个 看 似 无 伤 大 雅 的 小 问题 。 场 景 是 这 样 的 :A 模 
块 下 方 有 一 个 “B 模 块 "， 这 个 “B 模 块 ” 设 置 了 margin-top:-168px， 和 项 
望 可 以 覆 新 “A 模块 "后 面 的 部 分 内 容 ， 此 时 两 种 实现 的 差异 就 显现 出 来 
本 





如 果 是 前 面 position:relative 设置 在 容器 上 的 实现 ， 会 发 现 “B 
模块 * 并 没有 和 宪 新 “A 模块 "反而 是 被 “A 模块 ” 宪 盖 了 ! 原因 很 简单 ， 相 








比 普通 元 素 ， 相 对 定位 元 素 的 层 登 顺序 是 “多 畜 ”级 别 的 ， 上 自然 <A 模 
块 ? 要 复 盖 “了 模块 >。 如 果 要 想 实 现 目标 效果 ， 吏 需要 给 “了 模块 ?也 设 
置 position:relative 。 唉 ， 宛 冤 相 报 何 时 了 ? 


但 是 ， 如 采 是 后 面 “relative 的 最 小 化 影响 原则 ”的 实现 ， 由 于 
relative 只 影响 右上 和 角 的 图 标 ,“A 模 块 " 后 面 的 内 容 都 还 是 普通 元 
素 ， 那 么 ， 最 终 的 效果 就 是 我 们 希望 的 “B 模 块 " 窗 盖 “A 模 块 "， 不 动 一 兵 
一 从 就 达到 了 预期 目的 ， 岂 不 严 袁 ! 











“relative 的 最 小 化 影响 原则 ”不 仅 规 避 了 复杂 场景 可 能 出 现 样式 
问题 的 隐患 ， 从 日 后 的 维护 角度 讲 也 更 方便 ， 比 方 说 过 了 一 个 月 ， 我 们 
不 需要 右上 角 的 图 标 了 ， 直 接 移 除 这 个 relative 最 小 化 的 单元 即 可 ! 
但 是 ， 如 果 relative 是 这 个 容器 上 的 ， 这 段 样式 代码 你 敢 删 吗 ? 万 一 
其 他 元 素 定位 也 需要 呢 ? 万 一 relative 还 有 提高 层 车 顺序 的 作用 呢 ? 
留 着 没 问 题 ， 删 掉 可 能 出 bug， 我 想 大 多 数 的 开发 者 一 定 会 留 着 的 ， 这 
也 是 为 什么 随 着 项 目 进 程 的 推进 代码 会 越 来 越 见 余 的 原因 。 











从 这 一 点 可 以 看 出 来 ， 项 目 代码 越 来 越 爱 有 种、 越 来 越 元 余 ， 归 根 结 
底 还 是 一 开始 实现 项 目的 人 的 技术 水 平和 能 力 火候 还 不 够 。 实 现时 “ 洋 
溢 独 灿烂 的 笑容 ? 设 什 么 好 得 意 的 ， 能 够 让 日 后 维护 甚至 其 他 人 接手 项 
目 维护 的 时 候 也 “ 洋 洪 着 灿烂 的 笑容 >”， 那 才 是 真 历 害 ! 








6.10 ”强悍 的 position:fixed 固定 定位 


定位 属性 值 三 兄弟 的 老 三 position:fixed 固定 定位 是 三 人 中 最 强 
悍 的 ， 一 副 天 不 怕 地 不 怕 的 感觉 ， 主 要 表现 为 把 absolute 管 得 服 服 帖 


帖 的 relative 对 fixed 是 一 点 儿 办 法 都 没有 ， 普 通 元 素 想 要 
overflow:hidden 剪裁 position:fixed 也 是 痴人说梦 。 固 定 定位 之 
所 以 这 么 强悍 ， 根 本 原本 是 其 “包含 块 " 和 其 他 元 素 不 一 样 。 








6.10.1 position:fixed 不 一 样 的 “包含 块 ” 


position:fixed 固定 定位 元 素 的 “包含 块 ”" 是 根 元 素 ， 我 们 可 以 将 
其 近似 看 成 <html> 元 素 。 换 名 话说 ， 唯 一 可 以 限制 固定 定位 元 素 的 就 
是 <htm1> 根 元 素 ， 而 根 元 素 就 这 么 一 个 ， 也 就 是 全 世界 只 有 一 个 人 能 
限制 position:fixed 元 素 ， 可 见 人 家 强悍 还 是 有 强悍 的 资本 的 。 








所 以 ， 如 果 想 把 茶 个 元 素 固定 定位 在 茶 个 模块 的 右上 角 ， 下 面 这 种 
做 法 是 没有 用 的 : 


<div class="father"> 
<div class="son"></div> 
</divy> 
.father { 
width: 366px; height: 266pX; 
position: relative; 


.Son { 
width: 46px; height: 46px; 
position: fixed; 
top: 6; right: ©; 

} 





.Son 元 素 只 会 跑 到 窗 体 的 右上 角 ， 是 不 会 在 .father 的 右上 和 角 
的 ，relative 对 fixed 定位 没有 任何 限制 作用 。 


但 是 ， 并 不 是 说 我 们 无 法 把 .son 元 素 精 确定 位 到 .father 的 右上 
角 ， 事 实 上 是 可 以 实现 的 ， 如 何 实 现 呢 ? 


和 “无 依赖 的 绝对 定位 ?类 似 ， 就 是 “无 依赖 的 固定 定位 ?>， 利 
用 absolute/fixed 元 素 没有 设置 left/top/right/bottom 的 相对 定 
位 特性 ， 可 以 将 目标 元 素 定 位 到 我 们 想 要 的 位 置 ， 人 处 理 如 下 : 





<div class="father"> 
<div class="right"> 
&nbsp;<div class="son"></div> 
</div> 
</divy> 
.father { 
width: 366px; height: 266pX; 
position: relative; 
} 
.right { 


height: ©; 
text-align: right; 
overflow: hidden; 


} 

.Son { 
display: inline; 
width: 46px; height: 46px; 
position: fixed; 
margin-left: -46px; 

} 





6.10.2 ”position:fixed 的 absolute 模拟 





有 时 候 我 们 希望 元 系 既 有 不 跟随 深 动 的 固定 定位 效果 ， 双 能 被 定位 
元 素 限 制 和 精准 定位 ， 那 该 怎么 办 呢 ? 


我 们 可 以 使 用 position:absolute 进行 模拟 ， 原 理 其 实 很 简单 : 
页 面 的 滚动 使 用 普通 元 素 奉 代 ， 此 时 滚动 元 素 之 外 的 其 他 元 素 自 然 就 
有 了 “固定 定位 ”的 效果 了 。 


常规 的 HTML 结 构 和 和 CSS 代码 是 下 面 这 样 的 : 


<htm]> 
<body> 
<div class="fixed"><div> 
</body> 
</html> 


.fixed { 
position: fixed; 


} 





使 用 position:absolute 进行 模拟 则 需要 一 个 深 动 容器 ， 假 设 类 
名 是 .page ， 则 有 : 


<htm]> 
<body> 
<div class="page"> 固 定 定 位 元 素 <div> 
<div class="fixed"><div> 
</body> 
</html> 
html, body { 
height: 166%; 
overflow: hidden; 
} 
.page { 
height: 166%; 
overflow: auto; 
} 
.fixed { 
position: absolute; 


} 











整个 网 页 的 滚动 条 由 .page 元 素 产 生 ， 而 非 根 元 素 ， 此 时 .fixed 
元 素 虽 然 是 绝对 定位 ， 但 是 并 不 在 滚动 元 素 内 部 ， 自 然 滚 动 时 不 会 跟 
随 ， 如 同 固 定 定 位 效果 ， 同 时 本 里 绝对 定位 。 因 此 ， 可 以 使 
用 relative 进行 限制 或 者 overflow 进行 裁 甬 等 。 

















然而 ， 将 网 页 的 窗 体 深 劫 变 成 内 部 深 动 ， 很 多 窗 体 深 动 相关 的 小 
JavaScript 组 件 需 要 跟着 进行 调整 ， 并 且 可 能 会 丢失 其 他 一 些 浏览 嚣 内置 





6.10.3 ” position:fixed 与 背景 锁定 





蒙 层 弹 窗 是 网 页 中 常见 的 交互 ， 其 中 黑色 半 透 明 全 屏 履 善 的 蒙 层 基 
本 上 都 是 使 用 position: fixed 定位 实现 的 。 但 是 ， 如 果 细 致 一 点 儿 
就 会 发 现 蒙 层 无 法 覆盖 浏览 器 右 侧 的 滚动 栏 ， 并 且 鼠 标 滚 动 的 时 候 后 面 
的 背景 内 容 依然 可 以 被 滚动 ， 并 没有 被 锁定 ， 体 验 略 打折 扣 。 








如 果 和 希望 背景 锁定 ， 该 如 何 实现 呢 ? 


要 想 解 决 一 个 问题 ， 可 以 从 发 生 这 个 问题 的 原因 入 
手 。position:fixed 蒙 层 之 所 以 出 现 背景 依然 滚动 ， 那 是 因为 滚动 元 
素 是 根 元 素 ， 正 好 是 position:fixed 的 “包含 块 >。 所 以 ， 如 果 希 望 背 
景 被 锁定 ， 可 以 借鉴 <absolute 模拟 fixed 定位 ”的 思路 ， 让 页 面 滚动 
条 由 内 部 的 普通 元 素 产 生 即 可 。 











如 果 网 站 的 滚动 结构 不 方便 调整 ， 则 需要 借助 JavaScript 来 实现 锁 


如 果 是 移动 端 项 目 ， 阻 止 touchmove 事件 的 默认 行为 可 以 防止 滚 
动 ; 如 果 是 更 面 端 项 目 ， 可 以 让 根 元 素 直 接 overflow:hidden 。 但 
是 ，Windows 操 作 系 统 下 的 浏览 器 的 深 动 条 都 是 占据 一 定 宽度 的 ， 深 动 
条 的 消失 必然 会 导致 页 面 的 可 用 宽度 变化 ， 页 面 会 产生 体验 更 糟糕 的 晃 
动 问题 ， 那 怎么 办 呢 ? 很 简单 ， 我 们 只 需要 找 个 东西 填补 消失 的 滚动 条 
就 好 了 。 那 该 找 什么 东西 填充 呢 ? 这 时 候 就 轮 到 功勋 卓越 的 border 属 
性 出 马 了 一 一 消失 的 滚动 条 使 用 同等 宽度 的 透明 边框 填充 ! 











于 是 ， 在 蒙 层 显示 的 同时 执行 下 面 的 JavaScript 代 码 : 


var widthBar = 17, root = document .documentE1Lement ; 
if (typeof window.innerWidth == 'number') { 
widthBar = window.innerWidth - root.clientWidth; 


} 


root.style.overflow = 'hidden'; 
root.style.borderRight = widthBar + "px solid transparent'; 





隐藏 的 时 候 执行 下 面 的 JavaScript 代 码 : 


var root = document .documentE1Lement ; 
Foot .style.overflow = "'; 


Foot .style.borderRight = "" 





就 可 以 实现 我 们 期 望 的 锁定 效果 了 。 


第 7 章 “CSS 世界 的 层 玲 规则 


所 谓 “ 层 全 规则 ， 指 的 是 当 网 页 中 的 元 素 发 生 层 合 时 的 表现 规则 。 


在 现实 世界 ， 凡 事 都 有 个 先后 顺序 ， 凡 物 部 有 个 论 资 排 磊 。 例 如 ， 
食堂 排 队 打 饭 ， 讲 求 先 到 先 得 ， 总 不 可 能 一 拥 而 上 ; 先入 学 的 是 学 长 学 
姐 ， 先 拜师 的 是 师兄 师姐 。 








在 CSS 界 也 是 如 此 。 只 是 ， 一 般 情况 下 众生 平等 ， 看 不 出 什么 兰 
异 。 但 是 ， 当 产生 神 突 或 纠 允 的 时 候 ， 显 然 是 不 可 能 做 到 完全 平等 的 。 
对 CSS 世 界 中 的 元 素 而 言 ， 所 谓 的 “冲突 ? 指 什么 呢 ， 其 中 很 重要 的 一 个 
层面 就 是 “ 层 合 显示 冲突 ”。 














默认 情况 下 ， 网 页 内 容 是 没有 偏 移 角 的 垂直 视觉 呈现 ， 当 内 容 发 生 
层 谷 的 时 候 ， 一 定 会 有 一 个 前 后 的 层 合 顺序 产生 ， 有 点 儿 类 似 于 真实 世 
界 中 “ 论 资 排 非 ”的 感觉。 





7.1 z-index 只 是 CSS 层 闭 规 则 中 的 一 叶 小 舟 


说 到 层 合 ， 很 多 人 第 一 反应 就 是 z-index 属性 ， 人 如 其 名 ，“z 轴 顺 
序 ? 明 摆 着 就 是 和 层 登 规则 有 天。 














在 CSS 世 界 中 ，z-index 属性 只 有 和 定位 元 素 (position 不 
为 static 的 元 素 ) 在 一 起 的 时 候 才 有 作用 ， 可 以 是 正 数 也 可 以 是 负 
数 。 理 论 上 说 ， 数 值 越 大 层级 越 高 ， 但 实际 上 其 规则 要 复杂 很 多 ， 这 个 





后 面 会 深入 介绍 。 


但 随 着 CSS3 新 世界 的 到 来 ，z-index 已 经 并 非 只 对 定位 元 素 有 
效 ，flex 盒子 的 子 元 素 也 可 以 设置 z-index 属性 ， 不 过 本 书 并 不 予以 


讨论 。 








要 知道 ， 网 页 中 绝 大 部 分 元 素 是 非 定 位 元 素 ， 并 且 影 响 层 登 顺 序 的 
属性 远 不 止 z-index 一 个 ， 因 此 大 家 干 万 不 要 以 为 z-index 属性 就 可 以 
代表 CSS 世 界 的 层 羞 规则， 实际 上 z-index 只 是 CSS 层 羞 规 则 中 的 一 叶 
小 舟 ，CSS 层 闭 规 则 的 体 量 要 比 大 家 想象 的 要 大 得 多 。 


7.2 理解 CSS 世 春 的 层 登 上 下 文 和 层 登 水 平 


7.2.1 什么 是 层 营 上 下 文 


层 著 上下文， 英文 称 作 stacking context， 是 HIML 中 的 一 个 三 维 的 
概念 。 如 果 一 个 元 素 含 有 层 合 上 下 文 ， 我 们 可 以 理解 为 这 个 元 素 在 z 轴 
上 就 “高 人 一 


这 里 出 现 了 一 个 名 词 一 一 z 轴 ， 它 指 的 是 什么 呢 ? 其 表示 的 是 用 户 
与 显示 堪 之 间 这 条 看 不 见 的 垂直 线 ， 即 图 7-1 中 的 这 条 水 平 线 。 
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图 7-1 z 轴 示 意 








层 登 上下文 是 一 个 概念 ， 跟 “ 块 状 格式 化 上 下 文 ”(BFC) 类 似 。 然 
而 ， 概 念 这 个 东西 是 比较 虚 、 比 较 抽象 的 ， 要 想 轻松 理解 ， 我 们 需要 将 
其 其 象 化 。 





怎么 个 具象 化 法 昵 ?我 们 可 以 把 层 合 上 下 文理 解 为 一 种 “ 层 合 结 
界 ”， 自 成 一 个 小 世界 。 这 个 小 世界 中 可 能 有 其 他 的 “ 层 舍 结 界 ”"”， 而 自 
喘 也 可 能 处 于 其 他 “ 层 辣 结 界 ” 中 。 











7.2.2 什么 是 层 登 水平 








再 来 说 说 “ 层 登 水 平 ?”。 层 有 登 水 平 ， 页 文 称 作 stacking level， 决 定 了 
同一 个 层 琶 上 下 文中 元 素 在 z 轴 上 的 显示 顺序 。level 这 个 词 很 容易 让 我 
们 联想 到 现实 世界 中 的 论 资 排 辈 。 现 实 世界 中 ， 每 个 人 都 是 独立 的 个 
体 ， 包 括 同 卵 双胞胎 ， 有 差异 就 有 区 分 。 例 如 ， 双 胞 胎 虽 然 长 得 像 一 个 
模子 里 出 来 的 ， 但 实际 上 出 生 时 间 还 是 有 先后 的 ， 先 出 生 的 那个 就 大 ， 
是 大 哥 或 大 姐 。 网 页 中 的 元 素 也 是 如 此 ， 页 面 中 的 每 个 元 素 都 是 独立 的 
个 体 ， 它 们 一 定 是 会 有 一 个 类 似 的 排名 顺序 的 存在 。 而 这 个 排名 顺序 、 
论 资 排 非 就 是 这 里 所 说 的 “ 层 车 水 平 ”。 























显而易见 ， 所 有 的 元 素 都 有 层 舍 水 平 ， 包 括 层 营 上 下 文 元 素 ， 也 包 
括 普 通 元 素 。 然 而 ， 对 普通 元 素 的 层 合 水 平 探讨 只 局 限 在 当前 层 全 上 下 
文 元 素 中 。 为 什么 呢 ?” 因 为 不 如 此 束 没 有 意义 。 层 合 上 下 文本 身 就 是 一 
个 强力 的 “ 层 人 车 结 界 ”， 而 普通 元 素 的 层 苔 水 平 是 无 法 突破 这 个 结 界 和 结 
界外 的 元 素 去 较量 层 合 水 平 的 。 














要 注意 的 是 ， 诸 位 干 万 不 要 把 层 野 水 平和 和 CSS 的 z-index 属性 混 
pn 尽管 菏 些 情况 下 z-index 确实 可 以 影响 层 登 水 平 ， 但 是 只 限于 
定位 元 素 以 及 flex 盒子 的 孩子 元 素 ; 而 层 登 水 平 所 有 的 元 素 都 存在 。 

















7.3 理解 元 又 的 层 登 顺序 





再 来 说 说 层 登 顺序 。 层 登 顺序 ， 英 文 称 作 stacking order， 表 示 元 素 
发 生 层 登 时 有 着 特 定 的 垂直 显示 顺序。 注意 ， 这 里 跟 上 面 两 个 不 一 样 ， 
上 面 的 “ 层 登 上下文? 和 ?“ 层 登 水 平 " 是 概念 ， 而 这 里 的 “ 层 登 顺序 ?是 规 
则 。 











在 CSS 2.1 的 年 代 ， 在 CSS3 新 世界 还 没有 到 来 的 时 候 (注意 这 里 的 
前 提 〉 ， 层 车 顺序 规则 如 图 7-2 所 示 。 






序 





层 莹 上 下 文 
background/border 


图 7-2 ”CSS 世界 层 铬 顺序 规则 


关于 图 7-2 这 里 有 一 些 补充 说 明 。 





(1) 位 于 最 下 面 的 background/border 特 指 层 琶 上 下 文 元 素 的 边 
框 和 背景 色 。 每 一 个 层 又 顺序 规则 仪 适 用 于 当前 层 营 上 下 文 元 素 的 小 世 
界 。 








(2) inline 水 平 盒子 指 的 是 包括 inline/inline- 
block/inline-table 元 素 的 “ 层 登 顺序 ”， 它 们 都 是 同等 级 别 的 。 











(3) 单纯 从 层 墅 水平 上 看 ， 实 际 上 z-index:8 和 z-index:auto 
是 可 以 看 成 是 一 样 的 。 注 意 这 里 的 措 拜 一 一 “单纯 从 层 革 水平 上 看 ”"， 实 
际 上 ， 两 者 在 层 登 上 下 文 领域 有 着 根本 性 的 差异 。 








下 面 我 要 问 一 个 有 意思 的 问题 ， 大 家 有 没有 想 过 ， 为 什么 内 联 元 素 
的 层 登 顺序 要 比 浮 动 元 系 和 块 状 元 素 都 高 ? 


为 什么 呢 ? 我 明明 感觉 浮动 元 素 和 块 状元 系 要 更 强 一 点 啊 。 我 束 不 
卖 天 子 了 ， 直 接 看 图 7-3 中 的 标注 说 明 。 


层 芍 上 下 文 
background/border 


所 一 一 装饰 


block 块 状 水 平 盒子 





图 7-3 CSS 世界 层 登 顺序 类 型 标注 


background/border 为 装饰 属性 ， 浮 动 和 块 状元 素 一 般 用 作 布 
局 ， 而 内 联 元 素 都 是 内 容 。 网 页 中 最 重要 的 是 什么 ? 当然 是 内 容 了 ! 万 
其 是 CSS 世 界 是 为 更 好 的 图 文 展示 而 设计 的 ， 因 此 ， 一 定 要 让 内 容 的 层 
登 顺序 相当 高 ， 这 样 当 发 生 层 登 时 ， 重 要 的 文字 、 图 片 内 容 才 可 以 优先 
显示 在 屏幕 上 。 人 例如， 文字 和 浮动 图 片 重 登 的 时 候 ， 如 图 7-4 所 示 。 














哥 ， 好 巧 啊 ， 我 也 是 帅哥 ， 
这 本 书 的 人 都 是 帅哥 ~ 












图 7-4 ”浮动 元 素 和 文字 重合 时 文字 在 上 面 











7.4 务必 牢记 的 层 著 准 则 








下 面 这 两 条 是 层 登 领域 的 黄金 准则 。 当 元 素 发 生 层 有 登 的 时 候 ， 其 轿 





兰 关系 遵循 下 面 两 条 准则 : 








(1) 谁 大 谁 上 : 当 上 共有 明显 的 层 登 水 平 标识 的 时 候 ， 如 生效 的 z- 


index 属性 值 ， 在 同一 个 层 登 上 下 文 领域 ， 层 登 水 平 值 大 的 那 一 个 罗 凋 
小 的 那 一 个 。 








(2) 后 来 天上 : 当 元 又 的 层 登 水 平一 致 、 层 登 顺 序 相 同 的 时 候 ， 











在 DOM 流 中 处 于 后 面 的 元 素 会 履 凋 前 面 的 元 妹 。 


黄金 


在 CSS 和 HTML 和 领域， 只 要 元 素 发 生 了 重 登 ， 都 离 不 开 上 面 这 两 条 
准则 。 因 为 后 面 会 有 多 个 实例 说 明 ， 这 里 就 到 此 为 止 。 


ZT 


7.5.1 层 登 上 下 文 的 特性 





层 登 上 下 文 元 系 有 如 下 特性 。 





层 登 上 下 文 的 层 登 水 平 要 比 普 通 元 素 高 〈 原 因 后 面 会 说 明 ) 。 

层 芝 上下文 可 以 阻 断 元 素 的 混合 模式 (参见 
http://www.zhangxinxu.com/wordpress/?p=5155 的 这 篇 文章 的 第 二 部 
分 说 明 ) 。 

层 熙 上 下 文 可 以 租 套 ， 内 部 层 且 上 下 文 及 其 所 有 子 元 素 均 受制 于 外 
部 的 “ 层 登 上 下 文 ”。 

每 个 层 琶 上 下 文 和 兄弟 元 素 独立 ， 也 了 束 是 说 ， 当 进行 层 琶 变化 或 泻 
染 的 时 候 ， 只 需要 考虑 后 代 元 素 。 











。 每 个 层 登 上 下 文 是 目 成 体系 的 ， 当 元 素 发 生 层 有 登 的 时 候 ， 整 个 元 素 
被 认为 是 在 父 层 芝 上下文 的 层 装 顺序 中 。 


7.5.2 层 合 上 下 文 的 创建 


和 块 状 格式 化 上 下 文 一 样 ， 层 同上 下 文 也 基本 上 是 由 一 些 特定 的 
CSS 属 性 创建 的 。 我 将 其 总 结 为 3 个 流派。 











(1) 天 生 派 : 页 面 根 元 素 天 生 具 有 层 登 上下文， 称 为 根 层 骆 上 下 


(2) 正统 派 :z-index 值 为 数值 的 定位 元 素 的 传统 “ 层 营 上 下 


(3) 扩招 派 : 其 他 CSS3 属 性 。 


1 根 层 合 上 下 尺 





根 层 合 上 下 文 指 的 是 页 面 根 元 系 ， 可 以 看 成 是 <html> 元 素 。 
此 ， 页 面 中 所 有 的 元 素 一 定 处 于 至 少 一 个 “ 层 合 结 界 ” 中 。 











2. 定位 元 素 与 传统 层 倒 上下文 


对 于 position 值 为 relative/absolute 以 及 Firefox/IE 浏 览 
(不 包括 Chrome 浏 览 器 ) 下 含有 position:fixed 声明 的 定位 元 素 ， 当 
其 z-index 值 不 是 auto 的 时 候 ， 会 创建 层 登 上 下 文 。 





知道 了 这 一 点 ， 有 些 现象 就 好 理解 了 。 


HTML 代 码 如 下 : 


<div style="position:relative; z-index:auto;"> 

<1-- 美女 --> 

<img src="1.jpg" style="position:absolute; z-index:2;"> 
</div> 


<div style="position:relative; z-index:auto;"> 

<!-- 美景 --> 

<img src="2.jpg" style="position:relative; z-index:1;"> 
</div> 





结果 如 图 7-5 所 示 。 效 果 符 合 预 期 ， 毕 况 “ 美 女 * 图 片 的 z-index 值 
是 2 ， 而 “美景 * 图 片 的 z-index 是 1 。 





下 面 我 们 对 父 级 简单 调整 一 下 ， 把 z-index:auto 改 成 层 芭 水 平一 
样 高 的 z-index:8 。 代 码 如 下 : 


<div style="position:relative; z-index:0;"> 

<1-- 美女 --> 

<img src="1.jpg" style="position:absolute; z-index:2;"> 
</div> 


<div style="position:relative; z-index:0;"> 

<!-- 美景 --> 

<img src="2.jpg" style="position:relative; z-index:1;"> 
</div> 














结果 会 发 现 有 覆盖 关系 居然 反 过 来 了 ， 此 时 “美景 "图 片尾 盖 在 了 “美女 ”图 
片 之 上 ， 如 图 7-6 所 示 。 





图 7-5 “美女 ” 履 盖 在 “美景 > 之 上 





图 7-6 “美景 "覆盖 在 "美女 "之 上 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/7/5-1.php 或 者 扫 右 侧 的 
二 维 码 。 





为 什么 小 小 的 改变 会 产生 相反 的 结果 呢 ? 差别 就 在 于 ，z-index: 
auto 所 在 的 <div> 元 素 是 一 个 普通 定位 元 素 ， 于 是 ， ee 
元 素 的 层 登 比较 驶 不 受 父 级 的 影响 ， 两 者 直接 套用 “ 层 登 黄金 准则 ?”。 

里 ， 两 个 cimg> 元 素 有 着 明显 不 一 的 z-index 值 ， 因 此 遵循 : wa 
上 ”的 准则 ， 于 是 ，z-index 为 2 的 那个 “美女 ”就 显示 在 z-index 为 1 
的 “美景 "上面 了 。 





而 z-index 一 旦 变 成 数值 ， 哪 怕 是 6 ， 就 会 创建 一 个 层 革 上下文 。 
此 时 ， 层 姜 规 则 就 发 生 了 变化 。 层 有 奢 上 下 文 的 特性 里 面 最 后 一 条 是 自 成 
体系 。 两 个 <img> 元 素 的 层 闭 顺 序 比较 变 成 了 优先 比较 其 父 级 层 全 上 下 
文 元 素 的 层 舍 顺序 。 这 里 ， 由 于 外 面 的 两 个 <div> 元 素 都 是 z-index:6 
， 两 者 层 登 顺序 一 样 大 ， 此 时 遵循 “ 层 登 黄金 准则 ?的 另外 一 个 准则 "后 
来 居 上 ”根据 在 DOM 文 档 流 中 的 位 置 决定 谁 在 上 面 ， 于 是 ， 位 于 后 面 
的 “美景 ?就 自然 而 然 显示 在 “美女 "上 面 了 。 对 ， 没 错 ，<img> 元 素 上 的 
z-index 没 起 作用 ! 














有 时 候 ， 我 们 在 网 页 重 构 的 时 候 会 发 现 z-index 髓 套 错 乱 ， 这 时 要 











看 看 是 不 是 受 父 级 的 层 琶 上 下 文 元 素 干 拓 了 ， 可 能 承 秀 然 开 朋 了 。 但 我 
还 是 提 一 下 ， 正 6 和 正 7 浏览 器 有 个 bug， 就 是 z-index:auto 的 定位 元 
素 也 会 创建 层 赦 上 下 文 。 这 就 是 过 去 IE6 和 IE7 的 z-index 会 折腾 死人 的 
原因 。 





我 再 提 一 下 position:fixed 。 在 过 去 ，position:fixed 和 
relative/ absolute 在 层 登 上 下 文 这 一 块 是 一 样 的 ， 都 是 需要 z- 
index 为 数值 才 行 。 但 是 ， 不 知道 什么 时 候 起 ，Chrome 等 WebKit 内 核 
浏览 器 下 ，position:fixed 元 素 天 然 层 登 上 下 文 元 素 ， 无 顷 z-index 
为 数值 。 根 据 我 的 测试 ， 目 前 下 和 Firefox 仍 是 老 套 路 。 








3. CSS3 与 新 时 代 的 层 登 上 下 文 


CSS3 新 世界 的 出 现 除了 市 来 了 新 属性 ， 还 对 过 去 的 很 多 规则 发 出 
了 挑战 ， 其 中 对 层 全 上 下 文 规则 的 影响 显得 特别 突出 。 





(1) 元 素 为 flex 布 局 元 素 ( 父 元 素 display:flex|inline-flex 
) ， 同 时 z-index 值 不 是 auto 。 


(2) 元 素 的 opacity 值 不 是 1 。 


(3) 元 素 的 transform 值 不 是 none 。 


WS 


(4) 元 素 mix-blend-mode 值 不 是 normal 。 


ee 


(5) 元 素 的 filter 值 不 是 none 。 


(6) 元 素 的 jsolation 值 是 isolate 。 


(7) 元素 的 wil1-change 属性 值 为 上 面 2 一 6 的 任意 一 个 〈 如 


will-change:opacity、 will-chang:transform 等 )。 
(8) 元 素 的 -webkit-overflow-scrolling 设 为 touch 。 


本 书 主要 介绍 CSS 世 界 的 知识 ， 因 此 关于 CSS3 新 世界 的 内 容 就 说 这 
从 多 。 





7.53 层 从 上下文 写 层 营 顺序 


本 章 多 次 提 到 ， 一 旦 普通 元 素 上 共有 了 层 登 上下文， 其 层 合 顺 友 束 会 
变 高 。 那 它 的 层 登 顺序 客 竟 在 哪个 位 置 、 哪 个 级 别 呢 ? 








这 里 需要 分 两 种 情况 讨论 : 


(1) 如 果 层 登 上 和 下文 元 素 不 依赖 z-index 数值 ， 则 其 层 登 顺序 
是 z-index:auto ， 可 看 成 z:index:6 级 别 ; 


(2) 如 果 层 车 上 下 文 元 素 依赖 z-index 数值 ， 则 其 层 琶 顺序 由 z- 
index 值 决 定 。 





我 们 上 面 提供 的 层 登 顺序 图 实际 上 还 缺少 其 他 重要 信息 。 我 又 花 工 
夫 重 新 绘制 了 一 个 更 完整 的 7 阶层 又 顺序 图 ， 如 图 7-7 所 示 。 


层 合 上下文 
background/border 


block 块 状 水 平 盒子 


nline 水 平 盒子 


z-index:auto 或 看 成 z-index:0 
不 信 昔 z-index 的 层 埠 上下文 


正 z-index 





图 7-7 ”新 的 层 登 顺序 规则 


这 下 大 家 应 该 知道 为 什么 定位 元 素 会 层 登 在 普通 元 素 的 上 面 了 吧 ? 
其 根本 原因 就 是 元素 一 旦 成 为 定位 元 素 ， 其 z-index 就 会 自动 生效 ， 
此 时 其 z-index 就 是 默认 的 auto ， 也 就 是 9 级 别 ， 根 据 上 面 的 层 闭 顺 
序 表 ， 就 会 覆盖 in1line 或 block 或 float 元 素 。 而 不 支持 z-index 的 
层 著 上 下 文 元 素 天 然 是 z-index:auto 级 别 ， 也 就 意味 着 ， 层 琶 上 下 文 
元 素 和 定位 元 素 是 一 个 层 车 顺序 的 ， 于 是 当 它 们 发 生 层 著 的 时 候 ， 遵 循 
的 是 “后 来 居 上 ”准则 。 








我 们 可 以 看 一 个 例子 : 





<img src="1.jpg" style="position:relative"> 
<img src="2.jpg" style="transform:scale(1);"> 


[L 














这 符合 “后 来 天 上 ”准则 ,， “美景 ”覆盖 在 “美女 ”之 上 ， 如 图 7-8 所 示 。 


<img src="2.jpg" style="transform:scale(1);"> 


<img src="1.jpg" style="position:relative"> 








这 同样 符合 “后 来 居 上 ”准则 ,， “美女 ”覆盖 在 “美景 "之 上 ， 如 图 7-9 所 示 。 








你 会 发 现 ， 两 者 样式 一 模 一 样 ， 只 是 在 DOM 流 中 的 位 置 不 一 样 ， 
这 导致 它们 的 层 羞 表现 不 一 样 ， 后 面 的 图 片 在 前 面 的 图 片 的 上 面 最 示 。 
这 就 说 明 层 用 上 下 文 元 素 的 层 闭 顺序 束 是 z-index:auto 级 别 。 

















最 后 分 诗 一 个 与 层 合 上 下 文 相关 的 有 趣 现象 。 





图 7-8 “美景 " 窗 盖 在 “美女 ”之 上 











图 7-9 “美女 ” 履 盖 在 “美景 "之 上 





在 实际 项 目 中 ， 我 们 可 能 会 渐进 使 用 CSS3 的 fadeIn 淡 
入 animation 效果 增强 体验 ， 于 是 我 们 可 能 就 会 遇 到 类 似 下 面 的 现象 ， 
手动 输入 http://demo.cssworld.cn/7/5-2.php 或 者 扫 右 侧 的 二 维 码 。 有 一 个 
绝对 定位 的 黑色 半 透 明 层 缆 盖 在 图 片上 ， 默 认 显 示 如 图 7-10 所 示 。 但 
是 ， 一 旦 图 片 开 始 走 fadeIn 淡出 的 CSS3 动 画 ， 文 字 就 跑 到 图 片 后 面 去 
了 ， 因 为 文字 一 直 是 100% 透 明 的 纯 白 色 ， 文 字 变 淡 是 因为 跑 到 图 片 后 
面 ， 而 图 片 半 透 明 ， 文 字 罕 透 显示 而 已 ， 如 网 7-11 所 示 。 

















只 有 图 片 淡出 ， 文案 一 直 100% 透 明 


图 7-10 ”默认 的 黑色 半 透 明 履 盖 





图 7-11 图 片 淡 出 ， 文 字 跑 到 图 片 后 面 





为 什么 会 这 样 ? 实际 上 ， 学 了 本 市 的 内 容 后 就 很 容易 理解 
了 。fadeIn 动画 本 质 是 opacity 透明 度 的 变化 : 
@keyframes fadeIn { 


86X% { 
opacity: 0@; 


} 
166% { 
opacity: 1; 
} 
} 





要 知道 ，opacity 的 值 不 是 1 的 时 候 ， 是 具有 层 合 上 下 文 的 ， 层 准 


顺序 是 z-index:auto 级 别 ， 跟 没有 z-index 值 的 absolute 绝对 定位 
元 素 是 平起平坐 的 。 而 本 实例 中 的 文字 元 素 在 图 片 元 素 的 前 面 ， 于 是 ， 
只 要 CSS3 动 画 不 是 最 终 一 瞬间 ee ， 位 于 DOM 流 后 面 的 图 片 
就 会 遵循 “后 来 后 上 ?准则 而 履 盖 








知道 原因 ， 想 要 解决 这 个 问题 残 很 简单 了 : 


(1) 调整 DOM 流 的 先后 顺序 ; 





(2) 提高 文字 的 层 羞 顺序， 例如， 设置 z-index:1。 
7.6 z-index 负 值 深入 理解 


首先 明确 一 点 ，z-index 是 文 持 负 值 的 ， 例 如 z-index:-1 或 者 z- 
index:-99999 都 是 可 以 的 。 投 照 我 多 年 面试 新 人 的 结果 来 看 ， 非 常 多 
的 人 都 不 知道 z-index 属性 文 持 负 值 ， 这 让 人 很 意外 一 一 这 可 以 说 是 
CSS 世 界 的 常识 啊 ! 我 想 了 一 下 ， 或 许 因为 这 些 人 的 知识 都 是 源 自 项 
目 ， 如 果 项 目 用 不 到 自然 就 不 知道 


确实 ， 你 不 知道 z-index 文 持 负 值 并 不 影响 现在 的 开发 ， 需 求 可 以 
通过 其 他 方式 实现 ， 但 是 存在 既 有 道理 ， 你 不 知道 并 不 表示 没有 用 。 
旦 掌握 透彻 了 ， 你 会 发 现 ， 本 来 很 麻烦 的 实现 原来 可 以 这 么 简单 地 实 
ee 昌 到 一 些 棘 手 问 题 的 时 候 ， 多 了 一 ea 如 此 








那 z-index 具体 的 表现 规则 又 是 怎样 的 呢 ? 


很 多 人 包括 我 ) 一 开始 的 时 候 ， 以 为 一 个 定位 元 素 设 置 z-index 
负 值 ， 就 会 跑 到 页 面 的 背后 ， 隐 藏 掉 ， 看 不 到 了 。 结 果实 际 上 是 有 时 候 
确实 隐藏 了 了， 但 有 时 候 又 隐藏 不 掉 。 为 什么 会 这 样 ? 





因为 z-index 负 值 的 最 终 表现 并 不 是 单一 的 ， 而 是 与 “ 层 琶 上 下 
文 " 和 “ 层 革 顺序 ”密切 相关 。 前 面 展示 的 层 闭 顺 序 规则 7 阶 图 ， 其 中 最 下 
面 的 2 阶 是 理解 z-index 负 值 表现 的 关键 ， 如 图 7-12 所 示 。 





层 倒 上 下 文 
background/border 





block 块 状 水 平 盒子 


图 7-12 “层叠 顺序 ”最 底层 2 阶 














图 7-12 中 已 经 很 明显 地 标明 了 ，z-index 负 值 元 素 的 层级 是 在 层 闭 
上 下 文 元 素 上 面 、block 元 素 的 下 面 ， 也 就 是 z-index 虽然 名 为 负数 层 
级 ， 但 依然 无 法 突破 当前 层 琶 上 下 文 所 包 囊 的 小 世界 。 





我 们 通过 下 面 几 个 小 例子 加 深 一 下 理解 。 首 先 HTML 都 是 一 致 的 ， 
如 下 : 


<div class="box"> 
<img src="1.jpg"> 


</div> 





先 看 下 面 的 CSS 代 码 : 


.box { 
background-color: blue; 


} 


.box > img { 


position: relative; 
z-index: -1; 
right: -56pX; 

} 








此 时 .box 是 一 个 普 普 通通 的 元 素 ， 图 片 元 素 所 在 的 层 登 上 下 文 元 
素 一 定 是 .box 的 某 个 祖先 元 素 。 好 了 ， 知 道 这 么 多 足够 了 ， 现 在 再 回 
顾 一 下 刚刚 出 现 的 图 7-13 所 示 的 这 张 图 。 








图 7-13 中 非常 明显 地 标明 了 z-index 负 值 在 block 元 素 的 下 面 。 本 
例 中 ， 图 片 是 z-index 负 值 元 素 ，.box 是 block 元 素 ， 也 就 是 图 片 应 
该 在 .box 元 素 的 后 面 显 示 ， 因 此 ， 图 片 会 被 .box 元 素 的 蓝 色 背景 履 
盖 。 最 后 的 结果 确实 如 此 ， 如 图 7-14 所 示 。 


层 玲 上 下 文 
background/border 


block 块 状 水 平 盒子 





图 7-13 z-index 负 值 在 block 元 素 下 面 





图 7-14 图 片 在 蓝 色 背景 色 之 下 











现在 ， 我 们 给 .box 元 素 加 个 样式 ， 使 其 具有 层 车 上 下 文 。 很 多 
CSS 属 性 都 可 以 ， 我 们 这 里 就 使 用 不 影响 视觉 表现 的 transform 属性 示 
意 如 下 : 





.box { 
background-color: blue; 
transform: scale(1); 


.box > img { 


position: relative; 
z-index: -1; 
right: -56pX; 





Uae ee lie ai ts 
7-15， 非 常 明显 地 标明 了 z-index 负 值 在 层 琶 上 下 文 元 素 的 背景 色 
ae 
面 。 最 后 的 结果 确实 如 此 ， 如 图 7-16 所 示 。 








层 倒 上下文 
background/border 


block 块 状 水 平 盒 子 





图 7-15 z-index 负 值 在 “ 层 著 上 下 文 * 之 上 





图 7-16 图片 在 蓝 色 背景 色 之 上 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/7/6-1.php 或 者 扫 右 侧 的 
二 维 码 。 








可 以 这 


么 说 ，z-index 负 值 演 染 的 过 程 束 是 一 个 寻找 第 一 个 层 合 上 
下 文 元 素 的 过 程 ， 然 后 层 准 顺序 止步 


于 这 个 层 合 上 下 文 元 素 。 











明白 了 这 一 点 ， 就 可 以 理解 为 何 z-index 负 值 隐藏 元 素 有 时 候 确实 
隐藏 ， 但 有 时 候 义 隐藏 不 掉 了 。 








那 z-index 负 值 在 实际 项 目 中 有 什么 用 呢 ? 具体 作用 如 下 。 








(1) 可 访问 性 隐藏 。z-index 负 值 可 以 隐藏 元 素 ， 只 需要 层 登 上 
下 文 内 的 某 一 个 父 元 素 加 个 背景 色 就 可 以 。 它 与 clip 隐藏 相 比 的 一 个 
优势 是 ， 元 素 无 须 绝 对 定位 ， 设 置 position:relative 也 可 以 隐藏 ， 
男 一 个 优势 是 它 对 原来 的 布局 以 及 元 素 的 行为 没有 任何 影响 ， 而 clip 
隐藏 会 导致 控件 focus 的 焦点 发 生 细 微 的 变化 ， 在 特定 条 件 下 是 有 体验 
问题 的 。 它 的 不 足 之 处 就 是 不 具有 普 衣 适用 性 ， 震 要 其 他 元 素 配 合 进行 
隐藏 。 











(2) IE8 下 的 多 背景 模拟 。CSS3 中 有 一 个 多 背景 特性 ， 就 是 一 
个 background 可 以 写 多 个 背景 图 。 虽 然 正 8 浏览 器 不 支持 多 背景 特性 ， 
但 是 正 8 浏览 器 支持 伪 元 素 ， 于 是 ， 正 8 理论 上 也 能 实现 多 背景 ， 这 个 背 
景 最 多 3 个 ， 好 在 绝 大 多 数 场 景 3 个 背景 图 足 恬 。 最 奔 烦 的 其 实 是 这 个 伪 
元 素 生成 的 背景 一 定 是 使 用 absolute 绝对 定位 ， 以 免 影响 内 容 的 布 
局 。 于 是 问题 来 了 ， 绝 对 定位 会 覆盖 常规 的 元 素 ， 此 时 则 必须 借助 z- 
index 负 值 ， 核 心 CSS 代 码 如 下 : 








.box { 
background-image: (1.png); 
position: relative; 
z-index: 9; /* 创建 层 琶 上 下 文 */ 
} 


.box:before， 

.box:after { 
content: "" 
position: absolute; 
z-index: -1; 

} 

.box:before { 
background-image: (2.png); 

} 

.box:after { 
background-image: (3.png); 





此 时 ， 就 算 .box 元 素 里 面 是 纯 文字 ， 伪 元 素 图 片 照样 在 文字 下 
面 ， 如 此 广泛 的 适用 场景 使 上 面 的 处 理 几乎 可 以 作为 通用 的 多 背景 模拟 
实现 准则 来 实现 了 : 


<div class="box"> 我 是 一 段 纯 文字 .. .</div> 





(3) 定位 在 元 素 的 后 面 。 我 们 直接 看 一 个 模拟 纸张 效果 的 例子 ， 
该 效果 的 亮点 是 纸张 的 边 角 有 卷 起 来 的 效果 ， 因 为 底 边 的 阴影 看 起 来 更 
有 和 角度， 如 图 7-17 所 示 。 如 果 图 7-17 因 打印 原因 看 得 不 真切 的 话 ， 可 以 
手动 输入 http://demo.cssworld.cn/7/6-1.php 或 者 扫 下 面 的 二 维 码 亲自 感受 
= 














图 7-17 纸张 边 角 卷 起 来 的 阴影 














HTML 结 构 大 致 如 下 : 


<div class="container"> 
<div class="page"> 标 题 和 内 容 </div> 
</div> 





其 中 ，.container 是 灰色 背景 元 素 ，.page 是 黄色 背景 的 纸张 元 素 ， 
关键 CSS 如 下 : 





.Container { 
background-color: #666; 
/* 创建 层 合 上 下 文 */ 
position: relative; 
z-index: 6; 

} 

.page { 
background-color: #f4f39e; 
position: relative; 


} 
/* 边 角 卷 边 阴影 */ 
.page:before, .page:after { 
content: ""; 
width: 96%; height: 262%; 
box-shadow: 8 8px 16px rgba(6,6,6,，.3); 
position: absolute; 
/* 层 全 上下文 (灰色 背景 ) 之 上 ， 定 位 元 素 (黄色 纸张 ) 之 下 */ 
z-index: -1; 

















} 

/* 边 角 卷 边 阴影 定位 和 角度 控制 */ 

.page:before { 
transform: skew(-15deg) rotate(-5deg) ; 
transform-origin: left bottom; 
left: 68; bottom: 0@; 

} 

.page:after { 
transform: skew(15deg) rotate(5deg) ; 
transform-origin: right bottom; 
right: 6; bottom: 6; 

} 








.container 灰色 背景 通过 position:relative;z-index:6 创建 了 层 
车 上 下 文 ，.page 仅 有 position:relative 而 没有 设置 z-index 值 ， 
因此 只 能 算 z-index:auto 程度 的 定位 元 素 ， 于 是 ，z-index: -1 两 个 





边 角 阴 影 就 完美 地 藏 在 了 层 琶 上 下 文 (灰色 背景 ) 之 上 、 普 通 定位 元 素 
(黄色 纸张 ) 之 下 〈 如 图 7-18 所 示 标 注 ) ， 隐 藏 了 丑陋 的 细节 ， 展 示 了 
完美 的 边 角 阴 影 ， 实 现 了 最 终 细腻 的 样式 效果 。 





< 
和 < 一 这 角 候 元 素 关 蜡 


苗 色 纸张 
[aa 


图 7-18 z-index: -1 边 角 阴影 在 本 案例 中 的 层 合 顺序 位 置 








7.7 z-index “不 犯 二 ”准则 

此 准则 内 容 如 下 : 对 于 非 浮 层 元 素 ， 避 免 设置 z-index 值 ，z- 
index 值 没有 任何 道理 需要 超过 2 。 由 于 z-index 不 能 超过 2 ， 因 此 ， 
我 称 其 为 “不 犯 二 ”准则 。 

这 是 一 条 经 验 准 则 ， 可 以 有 效 降 低 日 后 过 到 z-index 样式 问题 的 风 


先 讲 一 下 为 什么 需要 这 个 准则 。 
(1)〉 定 位 元 素 一 旦 设置 了 z-index 值 ， 就 从 普通 定位 元 素 变 成 了 
层 攻 上下文 元 素 ， 相 互 间 的 层 车 顺序 就 发 生 了 根本 的 变化 ， 很 容易 出 现 
设置 了 巨大 的 z-index 值 也 无 法 履 盖 其 他 元 素 的 问题 。 





(2) 避免 z-index“ 一 山 比 一 山高 ”的 样式 混乱 问题 。 此 问题 多 发 
生 在 多 人 协作 以 及 后 期 维护 的 时 候 。 例 如 ，A 小 图 标定 位 ， 习 惯性 写 了 
个 z-index:9 ; B 一 看 ， 自 己 原来 的 实现 被 禾 产 了， 江 蕊 写 了 个 z- 
index:99 ; 结果 比 弹 框 组 件 层级 还 高 ， 那 还 得 了 ， 立 马 弹 框 组 件 来 一 
个 z-index:999999 ; 谁 知 后 来 ， 弹 框 中 又 要 有 出 错 提 示 效 果 .…… 显 
然 ， 最 后 项 目的 z-index 层级 管理 就 是 一 团 糟 。 





如 果真 的 了 解 了 本 章 的 内 容 ， 你 就 会 发 现 ， 原 来 自己 的 代码 中 很 大 
一 部 分 z-index 设置 都 是 多 余 的 ， 不 仅 浪 费 代 人 码 ， 还 埋 下 样式 问题 风 
， 尤 其 那 种 使 用 absolute 绝对 定位 必 使 用 z-index 的 做 法 是 最 思春 
的 。 


榨 


如 果 DOM 顺 序 确 实 无 法 调整 ， 不 得 不 使 用 z-index 值 ， 请 记 
住 ，z-index 不 要 超过 2 ， 不 是 不 能 ， 而 是 没有 必要 。 我 从 业 这 么 多 
年 ， 过 到 很 多 很 复杂 的 与 定位 相关 的 交互 场景 ， 但 z-index 最 多 止步 于 
2 。 如 果 你 的 定位 发 现 必须 z-index:3 或 者 以 上 才能 满足 效果 ， 建 议 你 
检查 自己 的 代码 ， 试 试 应 用 “relative 的 最 小 化 原则 ”来 实现 ， 试 试 利 
用 元 素 原生 的 层 车 顺序 进行 层级 控制 ， 等 等 。 


很 重要 的 一 点 ， 我 这 里 的 “不 犯 二 ”准则 ， 并 不 包括 那些 在 页 面 上 台 
来 对 去 的 元 素 定 位 ， 弹 框 、 出 错 提示 、 一 些 下 拉 效 果 等 都 不 受 这 一 准则 
限制 。 

对 于 这 类 JavaScript 驱 动 的 浮 层 组 件 ， 我 会 借助 “层级 计数 器 ”来 管 
理 ， 原因 如 下 : 


(1) 总 会 遇 到 意 想 不 到 的 高 层级 元 素 ; 


(2) 组 件 的 禾 兰 规则 具有 动态 性 。 


所 谓 “ 层 级 计数 器 ”， 实 际 上 就 是 一 段 JavaScript 脚 本 ， 会 遍历 所 
有 <body> 处 于 显示 状态 的 子 元 素 ， 并 得 到 最 大 z-index 值 ， 和 默认 的 
z-index 做 比较 。 如 果 超 出 ， 则 显示 的 组 件 的 z-index 自动 加 1， 这 样 
就 不 会 出 现 有 组 件 被 其 他 组 件 履 盖 的 问题 ;如果 不 超出 ， 就 使 用 默认 的 
z-index 值 ， 我 习惯 设 成 9 ， 因 为 遵循 “不 犯 二 ”准则 的 情况 下 ，9 已 经 
是 个 足够 安全 的 值 了 ， 浮 层 组 件 根本 无 须 担心 会 被 页 面 上 茶 个 元 素 层 级 


履 阁 。 





此 刻 大 家 不 妨 想 想 自己 的 项 目 ， 如 果 所 有 的 浮 层 相 关 的 组 件 容 器 的 
z-index 默认 值 是 9 ， 会 不 会 出 现 样 式 问 题 。 如 果 沉 得 层级 太 低 不 敢 想 
象 ， 则 说 明 你 的 项 目 层 级 这 块 还 有 较 大 改进 的 空间 。 





页 面 上 主体 元 素 遵循 z-index “不 犯 二 ”准则 ， 浮 层 元 素 使 用 z- 
index“ 层 级 计数 器 *”， 双 管 齐 下 ， 从 此 和 z-index 问题 说 拜拜 ! 


第 8 章 ”强大 的 文本 处 理 能 


时 势 造 瑞 雄 。 在 我 上 学 那 会 儿 ， 网 络 带宽 受 限 ， 电 脑 性 能 低下 ， 在 
这 种 大 背景 下 ， 重 文字 内 容 的 展示 是 比较 符合 现实 情 沉 的 ， 要 是 去 搞 个 
直播 网 站 ， 多 半 “ 卡 巴 斯 基 ( 卡 吧 死机 〉 ”， 上 所 以 在 那个 时 代 背 景 下 ， 什 
么 技术 能 够 非常 方便 地 进行 文本 处 理 和 文本 展示 ， 那 这 个 技术 一 定 能 够 
普及 和 兴盛 。 








CSS 就 是 凭借 自身 强大 的 文本 处 理 和 文本 展示 能 力 成 为 样式 布局 的 
标杆 语言 的 。 同 时 代 的 SVG 的 优势 在 于 图 形 展示 ， 它 在 文本 处 理 这 一 块 
实在 是 不 敢 茶 维 。 比 方 说 简单 的 文字 边缘 上 自动 换行 ， 在 CSS 流 的 概念 里 
几乎 可 以 说 是 天 生 的 、 理 所 当然 的 ， 但 在 SVG 里 面 ， 完 全 就 十 撞 了 南 墙 
也 不 回头 啊 ! 必须 要 手动 点 拨 一 下 才 行 。 





当然 ， 随 着 现在 软 人 硬件 的 提升 ， 人 们 对 互联 网 的 需求 已 经 不 仪 仅 局 
限于 简单 的 图 文 展 示 了 ， 此 时 ，SVG 以 及 canvas 等 技术 开始 迎 来 自己 的 
春天 。 


CSS 文 本 处 理 能 力 之 所 以 强大 ， 一 方面 是 其 基础 概念 ， 例 如 块 级 盒 
模型 和 内 联 盒 模型 ， 就 是 为 了 让 文本 可 以 如 文档 般 自 然 呈现 ， 另 一 方面 
是 有 非常 非常 多 与 文本 处 理 相 关 CSS 属 性 的 支持 。 而 本 章 就 将 着 重 介绍 
这 些 CSS 属 性 一 些 可 能 不 为 人 知 的 地 方 。 














8.1 line-height 的 另外 一 个 朋友 font-size 


第 5 章 介 绍 过 line-height 和 vertical-align 的 好 朋友 关系 ， 实 
际 上 ，font-size 也 和 1line-height 是 好 朋友 ， 同 样 也 无 处 不 在 ， 并 
且 纸 面 上 line-height 的 数值 属性 值 和 百分比 值 属性 值 都 是 相对 于 
font-size 计算 的 ， 其 关系 可 谓 不 言 而 喻 。 





现在 有 意思 了 ， 上 所 谓 朋 友 的 朋友 也 是 朋友 ， 那 font-size 和 
vertical-align 是 不 是 也 是 朋友 呢 ? 





8.1.1 font-size 和 vertical-align 的 隐秘 故事 


line-height 的 部 分 类 别 属性 值 是 相对 于 font-size 计算 
的 ，vertical-align 百分比 值 属 性 值 又 是 相对 于 line-height 计算 
的 ， 于 是 ， 看 上 去 八 碍 子 都 搭 不 上 边 的 vertical- align 和 font- 
size 属性 背后 其 实 也 有 有 着 关联 的 。 





例如 ， 下 面 的 CSS 代 码 组 合 : 


pi 
font-size: 16px; 
line-height: 1.5; 
} 


p > img { 
vertical-align: -25%; 
} 





此 时 ，p > img 选择 器 对 应 元 素 的 vertical-align 计算 值 应 该 是 : 


16px * 1.5 * -25% = -6px 


也 就 是 上 面 的 CSS 代 码 等 同 于 : 


font-size: 16px; 
line-height: 1.5; 
} 


p > img { 
vertical-align: -6px; 


} 








但 是 两 者 又 有 所 不 同 ， 很 显然 ，-25% 是 一 个 相对 计算 属性 值 ， 如 
末 此 时 元 系 的 font-size 发 生变 化 ， 则 图 片 会 自动 进行 垂直 位 置 调整 。 
我 们 可 以 看 一 个 无 论 font-size 如 何 变化 、 后 面 图 标 都 垂直 居中 对 齐 的 
例子 ， 手 动 输入 http://demo.cssworld.cn/8/1-1.php 或 者 扫 下 面 的 三 维 码 。 
可 以 看 到 ， 无 论文 字 字 号 是 大 还 是 小 ， 后 面 的 图 标 都 非常 良好 地 垂直 居 
中 对 齐 ， 如 图 8-1 所 示 。 














图 8-1 永远 垂直 居中 对 齐 的 图 标示 意 





核心 CSS 代 码 如 下 : 


p > img { 
width: 16px; height: 16px; 
vertical-align: 25%; 


position: relative; 
top: 8px; 
} 





原理 如 下 : 内 联 元 素 默 认 基 线 对 齐 ， 图 片 的 基线 可 以 看 成 是 图 片 的 
下 边缘 ， 文 字 内 容 的 基线 是 字符 x 下 边缘 ， 因 此 ， 本 例 中 ， 图 片 下 边缘 
默认 和 “中 文 ?两 个 汉字 字形 底 边 缘 往 上 一 点 的 位 置 对 齐 。 然 后 ， 我 们 通 
过 vertical-align:25% 声明 让 图 片 的 下 边缘 和 中 文 汉字 的 中 心 线 对 
齐 。 此 时 ， 图 标 和 文字 的 状态 应 该 如 图 8-2 所 示 。 


文字 


图 8-2 ”图片 下 边缘 和 文字 中 心 线 对 齐 标注 示意 





图 8-2 完 全 就 是 实例 效果 注释 top:8px 后 的 截图 标注 ， 没 有 任何 加 
工 。 看 上 去 似乎 上 面 小 ， 实 际 上 是 视觉 误差， 分 阳线 上 下 完全 均等 ，1 
像素 不 差 。 





由 于 我 们 这 里 的 图 标 是 固定 的 像素 尺寸 ， 因 此 ， 通 过 偏 移 自 和 喘 1/2 
高 度 来 实现 真正 的 居中 ， 可 以 使 用 CSS3 transform 位 移 ， 我 这 里 为 了 
兼容 性 ， 使 用 了 relative 相对 定位 。 








其 居中 原理 本 质 上 和 绝对 定位 元 素 58% 定位 加 偏 移 自 身 1/2 尺寸 实 
现 居中 是 一 样 的 ， 只 不 过 这 里 的 偏 移 使 用 的 是 vertical-align 百分比 


值 。 


这 么 一 看 ，vertical-align 百分比 属性 值 似 乎 还 是 有 点 用 的 ! 如 
果 再 联想 到 vertical-align:middle 实现 垂直 居中 效果 经 常 不 尽 如 人 
意 ， 说 不 定 还 能 找到 一 块 更 好 的 宝 。 但 我 要 告诉 你 ， 其 实 还 有 更 好 的 实 
现 ， 那 惑 是 使 用 单位 ex 。 例 如 ， 将 前 面 例子 中 的 vertical- 
align:25% 改 成 vertical-align: .6ex ， 效 果 基 本 上 就 是 一 样 的 ， 并 
且 还 多 了 一 个 优点 ， 束 是 使 用 vertical-align:.6ex 实现 的 垂直 居中 
效果 不 会 受 1ine-height 变化 影响 ， 而 使 用 vertical-align:25% 
，line-height 一 旦 变化 ， 就 必须 改变 原来 的 vertical-align 大 
小 、 重 新 调整 垂直 位 置 ， 这 容错 性 明显 就 降 了 一 个 层次 。 








因此 ， 虽 然 例 子 演 示 的 是 vertical-align 百分比 值 ， 实 际 上 是 推 
荐 使 用 与 font-size 有 着 密切 关系 的 ex 单位 。 


说 到 这 里 ， 怒 不 住 想 介绍 男 外 一 些 和 font-size 有 着 密切 的 关系 的 
东西 。 


8.1.2 ”理解 font-size 与 ex 、em 和 rem 的 关系 





ex 是 字符 Xx 高度， 显然 和 font-size 关系 密切 ，font-size 值 越 
大 ， 目 然 ex 对 应 的 大 小 也 就 大 ， 对 此 本 书 前 面 已 经 有 介绍 ， 这 里 不 痪 








下 面 来 看 看 单位 em 。 如 果 说 ex 是 字符 x 局 度 ， 那 是 不 是 em 束 是 字 
人 符 m 的 高 度 ? 





我 的 回答 是 “不 是 的 ”， 但 是 em 和 字符 m 确 实 有 关 。enm 在 传统 排版 

















中 指 一 个 字模 的 高 度 〈《 可 以 脑 补 下 活字 印刷 的 字模 ) ， 注 意 是 字模 的 高 
度 ， 不 是 字符 的 高 度 。 其 一 般 由 'M' 的 宽度 决定 (因为 宽 高 相同 ) ， 所 
以 叫 em 。 也 就 是 说 ， 之 所 以 叫 作 em 完全 取决 于 M 的 字形 ， 毕 竞 英 文 26 
个 字母 方 方 正 正 的 不 算 多 。 如 采 按 照 这 种 说 法 ， 那 方 方 正 正 的 汉字 岂 不 
是 每 一 个 字 都 正好 一 个 em ? 没 错 ， 确 实 是 这 样 ， 尤 其 作为 印刷 体 的 宋 
体 效 果 最 为 明显 ， 这 种 表现 在 CSS$ 中 也 有 非常 明显 的 体现 。 


例如 ， 浏 览 句 默认 font-size 大 小 是 16px ， 假 设 一 个 <div> 宽度 
是 166px ， 则 正好 可 以 放下 10 个 汉字 不 换行 ， 如 果 是 159px 像素 ， 第 十 
个 汉字 就 会 掉 下 来 ， 如 果 再 同时 设置 line-height:1 和 一 个 背景 色 ， 
代码 如 下 : 
div { 


width: 168px; 
line-height: 1; 


background-color: #eee; 


} 








我 们 就 会 发 现 中 文 汉字 的 尺寸 瑟 可 以 看 作 em 单位 的 代名词 ， 尤 其 在 高 
度 这 一 块 ， 简 直 分 坚 不 着 ， 如 图 8-3 所 示 。 
中 文中 文中 文中 文中 文 


图 8-3 ”汉字 尺寸 和 em 单位 关系 示意 























也 就 是 说 ，em 就 是 "中 ' 等 汉字 的 高 度 ! 于 是 ， 我 们 对 em 的 理解 就 
更 加 简单 了 ， 直 接 看 一 个 很 容易 理解 错误 的 题目 ， 在 Chrome 浏 览 器 
下 ，<h1> 元 素 有 如 下 的 默认 CSS: 


h1 { 
font-size: 2em; 


-webkit-margin-before: 0.67em; 
-webkit-margin-after: 0.67em; 


} 





那么 ， 假 设 页 面 没 有 任何 CSS 重 置 ， 根 元 素 font-size 就 是 默认 的 16px 
， 请 问 : 此 时 <h1> 元 素 margin-before 的 像素 计算 值 是 多 少 ? 





如 果 对 em 了 解 不 够 ， 很 容易 认为 1em 大 小 就 是 16px ， 于 是 计算 值 
是 16pxx8.67 = 16.72px ， 实 际 上 这 是 错误 的 。 








我 们 可 以 这 样 想 ， 假设 ch1> 里 面 有 汉字 ， 此 时 汉字 的 高 度 是 多 
少 ? 这 个 高 度 就 是 此 时 1em 大 小 。<h1> 元 素 此 时 font-size 是 2em ， 
算 一 下 就 是 32px ， 因 此 ， 此 时 里 面 汉字 的 高 度 应 该 是 32px ， 也 就 是 
说 ， 此 时 <h1> 元 素 的 1em 应 该 是 32px ， 于 是 margin-before 的 像素 计 
算 值 为 32px x6.67 = 21.44px ， 和 浏览 器 自己 的 计算 值 一 样 ， 如 图 8- 
4 所 示 。 





> -webkit-margin-after 21.44px 
bp -webkit-margin-before 21.44px 
> -webkit-margin-end 8px 
> -webkit-margin-start @pxX 








图 8-4 ”Chrome 浏览 器 <h1> 元 素 margin 计算 值 


乍 一 看 ， 似 乎 出 现 了 死 循环 屠 论 : font-size:2em， 于 是 1em 变 
成 32px ， 那 此 时 的 2em 不 又 是 64px ， 然 后 义 .………. 





正如 前 面 所 到 过 的 一 样 ，CSS 世 界 的 泻 染 是 一 次 泻 染 ， 是 不 会 有 死 
循环 的 。 这 里 是 先 计算 font-size ， 然 后 再 计算 给 其 他 使 用 em 单位 的 
属性 值 大 小 。 





总 结 如 下 : 在 CSS$ 中 ，1enm 的 计算 值 等 同 于 当前 元 素 所 在 的 font- 
size 计算 值 ， 可 以 将 其 想象 成 当前 元 素 中 《如 果 有 ) 汉字 的 高 度 。 


所 有 相对 单位 的 好 处 都 是 一 样 的 ， 样 式 表 现 更 具有 弹性 。 例 如 ， 理 
论 上 ， 有 一 个 布局 ， 希望 小 屏 时 整体 缩小 ， 大 屏 时 再 弹性 扩大 ， 此 时 区 
可 以 让 所 有 元 系 宽 高 矿 寸 等 都 使 用 em ， 于 是 ， 最 后 只 要 改变 布局 祖先 
元 素 的 font-size 大 小 就 可 以 实现 整体 的 弹性 变化 。 

















这 种 集 略 很 棒 ， 也 确实 可 行 ， 但 是 有 一 个 比较 肤 烦 的 事情 ， 它 和 上 
面 <h1> 元 素 计 算 一 样 的 抹 烦 ，em 是 根据 当前 font-size 大 小 计算 的 ， 
一 旦 布局 中 出 现 标 题 这 种 跟 基础 font-size 大 小 不 一 样 的 场景 的 时 候 ， 
标题 里 面 所 有 元 素 em 都 要 重新 计算 一 迄 ， 其 为 肪 烦 ， 最 终 的 成 品 维护 
成 本 就 比较 高 了 。 








正 是 由 于 这 种 局 限 性 ， 另 外 一 个 和 font-size 密切 相关 的 单位 出 现 
了 ， 就 是 rem ， 即 root em， 顾 名 思 义 ， 束 是 根 元 素 em 大 小 。em 相对 于 
当前 元 系 ，rem 相对 于 根 元 素 ， 本 质 差别 在 于 当前 元 素 是 多 变 的 ， 根 元 
素 是 固定 的 ， 也 就 是 说 ， 如 果 使 用 rem ， 我 们 的 计算 值 不 会 受 当前 元 
素 font-size 大 小 的 影响 ， 假 设 <h1> 的 默认 CSS 是 这 样 : 











hi { 
font-size: 2em; 
-webkit-margin-before: 6.67rem; 


-webkit-margin-after: 0.67rem; 


} 





那么 2m 的 font-size 计算 值 会 被 忽略 ， 直 接 使 用 根 元 素 的 16px 进行 计 
算 ， 于 是 margin- before 计算 值 是 16 像 素 x0.67 = 10.72 像 素 。 


因此 ， 要 想 实 现 带 有 缩放 性 质 的 弹性 布局 ， 使 用 rem 是 最 佳 策 略 ， 
但 rem 是 CSS3 单 位 ，IE9 以 上 浏览 器 才 支 持 ， 需 要 注意 兼容 性 ， 我 这 里 
就 不 再 多 介绍 了 。 





回 到 em 单位 。em 实际 上 更 适用 于 图 文 内 容 展 示 的 场景 ， 对 此 进行 
弹性 布局 。 例 如 ，<h1> 一 <h6> 以 及 <p> 等 与 文本 内 容 展 示 的 元 又 的 
margin 都 是 用 em 作为 单位 ， 这 样 ， 当 用 户 把 浏览 器 默认 字号 从 “中 ” 设 
置 成 “大 ”或 改 成 “小 ”的 时 候 ， 上 下 间距 也 能 根据 字号 大 小 自动 调整 ， 使 
阅读 更 舒服 。 


再 举 个 适用 于 em 的 场景 ， 如 果 我 们 使 用 SVG 矢量 图 标 ， 建 议 设置 
SVG 宽 高 如 下 : 


svg { 
width: lem; height: 1lem; 
} 


这 样 ， 无 论 图 标 是 个 大 号 文字 混在 一 起 还 是 和 小 号 文字 混在 一 起 ， 都 能 
和 当前 文字 大 小 保持 一 致 ， 既 省 时 又 省 力 。 








8.1.3 ”理解 font-size 的 关键 字 属 性 值 


font-size 支持 长 度 值 ， 如 1em ， 也 支持 百分比 值 ， 如 166% 。 这 
两 点 想必 众所周知 ， 但 font-size 还 支持 关键 字 属 性 值 这 一 点 怕 是 就 有 
不 少 人 不 清楚 了 。 





font-size 的 关键 字 属 性 值 分 以 下 两 类 。 





(1) 相对 尺寸 关键 字 。 指 相对 于 当前 元 素 font-size 计算 ， 包 


括 : 


。 larger: 大 一 点 ， 是 <big> 元 素 的 默认 font-size 属性 值 。 
。smaller: 小 一 点 ， 是 <small> 元 素 的 默认 font-size 属性 值 。 





(2) 绝对 尺寸 关键 字 。 与 当前 元 素 font-size 无 关 ， 仅 受 浏览 器 
设置 的 字号 影响 。 注 意 这 里 的 措 和 群 ， 是 “浏览 器 设置 ?>， 而 非 “ 根 元 素 ”， 
两 者 是 有 区 别 的 。 





。 Xx-large: 好 大 好 大 ， 和 <h1> 元 素 计算 值 一 样 。 

。Xx-large: 好 大 ， 和 <h2> 元 素 计 算 值 一 样 。 

。 1large: 大 ， 和 <h3> 元 素 计 算 值 近似 “〈“ 近 似 ” 指 计算 值 偏差 在 1 像 
素 以 内 ， 下 同 ) 。 

medium: 不 上 不 下 ， 是 font-size 的 初始 值 ， 和 <h4> 元 素 计 算 值 
一 样 。 为 了 解决 大 家 可 能 有 的 疑问 ， 这 里 有 必要 多 说 几 句 。 如 果 
font-size 默认 值 是 medium ， 而 medium 计算 值 仅 与 浏览 器 设置 
有 关 ， 那 为 何 我 们 平时 元 素 font-size 总 是 受 环境 影响 变 来 变 去 
呢 ? 














这 完全 是 因为 font-size 属性 的 继承 性 ， 实 际 开发 的 时 候 ， 我 们 常 
常会 对 <htm1> 或 cbody> 重 置 font-size 大 小 ， 例 如 : 
body { 


font-size: 14px; 


} 


于 是 ， 受 继承 性 影响 ， 大 多 数 后 代 元 素 的 font-size 计算 值 也 变 成 
了 14px ，medium 这 个 初始 值 受 继 承 性 影响 而 被 覆盖 了 。 





small: 小 ， 和 <h5> 元 素 计 算 值 近似 。 
x-small: 好 小 ， 和 <h6> 元 素 计 算 值 近似 。 
xx-smal1: 好 小 好 小 ， 无 对 应 的 HIMEL 元 素 。 





其 中 ， 相 对 尺寸 关键 字 larger 和 smaller 由 于 计算 的 系数 在 不 同 
浏览 器 下 差异 很 大 ， 因 此 实用 价值 有 限 ， 只 有 类 似 文档 页 、 帮 助 页 这 类 
对 文字 尺寸 要 求 不 高 的 场合 才 有 用 ; 而 绝对 尺寸 关键 字 的 实用 性 要 大 一 
些 ， 而 且 在 某 些 场合 是 推荐 使 用 的 关键 字 属 性 值 ， 这 个 要 慢 慢 讲 。 











首先 ， 我 抛 出 一 个 简单 的 问题 : 下 面 两 个 CSS 代 码 有 什么 区 别 ? 


html { 

font-size: 14px; 
} 
html { 


font-size: 87.5%; 
} 





在 绝 大 多 数 场景 下 ， 两 者 没有 差别 ， 全 都 计算 为 14px ， 但 是 如 果 
用 户 对 浏览 器 的 字号 进行 了 调整 ， 例 如 ， 把 默认 的 “中 ”设置 成 了 “大 ”， 
如 图 8-5 所 示 〈 截 自 Chrome 浏 览 器 ) ， 那 么 此 时 ，font-size:14px 计 
算 值 还 是 14px ， 但 font- size:87.5% 的 计算 值 则 大 了 一 圈 ， 于 是 差 
别 就 出 现 了 。 如 果 是 像素 单位 font-size ， 用 户 改 变 浏 览 器 的 默认 字号 
后 ， 页 面 会 微 丝 不 动 ; 如 果 是 百分比 值 font-size ， 则 字号 相应 放大 ， 
这 就 涉及 用 户 体 验 和 可 访问 性 问题 了 。 
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Google Chrome 会 使 用 佘 计 各 TU 系 玩 代理 设 重 连接 到 网 络 。 


图 8-5 ” Chrome 浏览 器 设置 网 页 内 容 的 字号 为 大 





正常 情况 下 ，14 像 素 的 文字 大 小 是 足够 的 ， 但 是 ， 如 果 是 高 度 近 视 
的 用 户 ， 或 者 上 班 急 急 忙 忙 忘记 戴 眼 镜 ， 或 者 在 投影 仪 上 投影 网 页 内 
容 ， 此 时 就 有 大 字号 浏览 网 页 的 需求 ， 如 果 使 用 固定 的 像素 单位 ， 显 然 
对 这 些 使 用 场景 是 不 友好 的 。 





好 在 浏览 器 还 提供 了 “网 页 缩放 ”功能 ， 但 是 此 功能 也 是 有 局 限 性 
的 : 如 果 网 页 是 定 宽 非 响应 式 的 ， 则 网 页 放大 后 窗 体 以 外 的 内 容 就 看 不 
到 了 ， 在 Chrome/Firefox 浏 览 器 下 甚至 连 个 水 平 深 动 条 都 没有 ， 说 不 定 
重要 信息 就 会 看 不 到 。 由 此 可 见 ， 我 们 是 不 能 轻易 忽视 浏览 器 字号 设置 
功能 的 。 

















然而 ， 现 代 网 页 设计 得 很 精致 ， 要 想 网 页 布局 跟随 字体 内 容 缩放 实 
在 两 难 ， 要 么 使 用 em ， 但 em 计算 与 当前 font-size 耦合 ， 不 好 维护 ; 
要 么 使 用 rem ， 但 下 8 不 支持 ， 桌 面 端 使 用 篮 雁 。 因 此 ， 现 实 的 压迫 导 
致 我 们 只 能 使 用 px 进行 布局 ， 尤 其 昌 面 端 网 页 。 








如 何 权衡 “易于 实现 维护 “视觉 还 原 “ 可 访问 性 ”这 三 者 ， 我 这 里 有 
两 个 珍藏 的 建议 。 


(1) 即使 是 定 宽 的 传统 果 面 端 网 页 ， 也 需要 做 啊 应 式 处 理 ， 尤 其 











征 针 对 1200 像 素 宽度 设计 的 网 页 ， 但 只 需要 啊 应 到 800 像 素 即 可 ， 可 以 
保证 至 少 有 1.5 倍 的 缩放 空间 ， 如 有 果 做 到 这 一 步 ， 那 么 是 否 需要 啊 应 浏 
览 髓 的 字号 设置 这 一 点 就 可 以 忽略 。 





(2) 如 果 困 各 种 原因 无 法 做 啊 应 式 处 理 ， 也 疫 有 必要 全 局 都 使 用 
相对 单位 ， 毕 竞 成 本 等 现实 问题 摆 在 那里 ， 其 实 只 需要 在 图 文 内 容 为 主 
的 重要 局 部 区 域 使 用 可 缩放 的 font-size 处 理 即 可 。 例 如 ， 小 说 网 站 的 
阅读 页 、 微 信 公 众 号 文章 展示 区 、 私 信 对 话 内 容 区 、 搜 索引 擎 的 落地 
页 、 评 论 区 等 ， 都 强烈 建议 据 弃 px 单位 ， 而 采用 下 面 的 实践 集 略 。 











。 容器 设置 font-size:medium ， 此 时 ， 这 个 局 部 展示 区 域 的 字号 就 
跟着 浏览 器 的 设置 走 了 ， 默 认 计 算 值 是 16px 。 

。 容器 内 的 文字 字号 全 部 使 用 相对 单位 ， 如 百分比 值 或 者 em 都 可 
以 ， 然 后 基于 16px 进行 转换 。 例 如 : 








.article { 
font-size: medium; 


} 

.article hi { 
font-size: 2em; 
margin: .875em 6; 


.article p { 
font-size: 87.5%; /* 默认 字号 下 计算 值 是 14px */ 
margin: 1lem 0; 


} 

















同时 使 用 上 自 适应 流体 布局 ， 间 距 什 么 的 也 使 用 相对 单位 ， 例 如 上 
面 margin 使 用 的 是 em 单位 。 于 是 ， 当 用 户 改 变 了 浏览 费 的 字号 后 ， 整 
个 阅读 区 域 的 所 有 字样 甚至 布局 都 会 跟着 放大 ， 文 字 一 下 子 束 看 清楚 
了 。 这 种 局 部 处 理 的 好 处 在 于 ， 页 面 的 导航 、 侧 边栏 这 些 不 需要 长 时 间 














阅读 的 模块 还 是 原来 的 像素 布局 ， 还 是 那么 精致 ， 丝 毫 不 受 影响 。 就 这 
么 很 微小 的 变动 ， 就 可 以 让 你 的 网 页 在 可 访问 性 这 一 块 超越 大 多 数 的 网 
站 ， 何 乐 而 不 为 ? 














可 以 看 到 ， 绝 对 尺寸 关键 字 在 实际 项 目 中 还 有 很 有 价值 的 ， 但 有 价 
值 的 仅仅 是 medium ， 至 于 其 他 关键 字 ， 作 用 仪 限 于 字面 上 的 那 点 儿 ， 
大 家 了 解 一 下 即 可 。 


8.1.4 font-size:6 与 文本 的 隐藏 


果 面 Chrome 浏 览 器 下 有 个 12px 的 字号 限制 ， 就 是 文字 的 font- 
size 计算 值 不 能 小 于 12px ， 我 猜 是 因为 中 文 ， 如 宋体 ， 要 是 小 于 12px 
， 恕 会 挤 成 成 一 团 ， 略 丑 ，Chrome 看 不 下 去 ， 就 直接 禁用 了 。 





正 是 这 种 限制 导致 我 们 在 使 用 em 或 rem 进行 布局 的 时 候 ， 不 能 这 
么 处 理 : 
html { 


font-size: 62.5%; 
} 








理论 上 ， 此 时 根 字 号 计算 值 是 16px*6.625=16px ， 于 
width:14px 可 以 写成 width:1.4em， 和 省 了 很 多 计算 的 麻烦 。 但 

， 在 Chrome 下 ， 由 于 12px 的 限制 ， 根 字号 计算 值 实际 不 是 16px ， 而 
12px ， 所 以 ， 可 以 试 试 处 理 成 这 样 : 


html { 
font-size: 625%; 
} 


[和 并 ft 








此 时 根 字 号 计算 值 是 169px ， 既 计算 无 忧 ， 又 没有 12px 的 最 小 字 
号 限制 。 


但 是 我 个 人 建议 还 是 不 要 这 样 处 理 ， 尤 其 使 用 em 的 时 候 ， 
为 font-size 属性 和 1line-height 属性 一 样 ， 由 于 继承 性 的 存在 ， 会 
影响 贯穿 整个 网 页 ，166px 的 环境 font-size 一 定 会 将 平时 不 显 山 露水 
的 底 边 对 齐 问 题 、 间 隐 问 题 等 放大 ， 导 致 出 现 一 些 明 显 的 样式 问题 ， 如 
果 对 CSS 了 解 不 是 很 深刻 ， 怕 是 很 难 明白 为 什么 会 发 生 这 样 的 问题 。 同 
时 这 样 做 也 限制 了 px 等 其 他 单位 的 使 用 ， 有 时 候 是 比较 要 命 的 。 











因此 ， 我 的 建议 是 仍 基于 浏览 器 默认 的 字号 进行 相对 计算 ， 也 束 
是 medium 对 应 的 16px ，16 这 个 数字 是 一 定 可 以 整除 的 ， 因 此 计算 成 本 
还 行 ， 或 者 使 用 Sass 或 Less 之 类 的 工具 辅助 计算 。 


还 是 回 到 字号 限制 的 问题 。 实 际 上 ， 并 不 是 所 有 小 于 12px 的 font- 
size 都 会 被 当 作 12px 处 理 ， 有 一 个 值 例 外 ， 那 就 是 8 ， 也 就 是 说 ， 如 
果 font-size:8 的 字号 表现 就 是 9 ， 那 么 文字 会 直接 被 隐藏 挥 ， 并 且 只 
能 是 font-size:6 ， 哪 怕 设 置 成 font-size:6.6868686661px， 都 还 是 会 
被 当 作 12px 处 理 的 。 





因此 ， 如 果 和 希望 隐藏 1ogo 对 应 元 素 内 的 文字 ， 除 了 text-indent 
缩 进 隐藏 外 ， 还 可 以 试 试 下 面 这 种 方法 : 
.logo { 


font-size: 9; 


} 


8.2 ”字体 属性 家 族 的 大 家 长 font-family 


CSS 世 界 中 的 有 很 多 属性 都 是 以 font- 开头 的 ， 如 font-style 
、font-weight 和 这 里 要 介绍 的 font-family ， 我 把 所 有 这 些 以 
font- 开头 的 CSS 属 性 统称 为 “字体 属性 家 族 ”。 就 最 终 的 深度 、 广 度 和 
应 用 程度 来 看 ，font -family 有 点 儿 神 似 “ 字 体 属 性 家 族 ” 的 大 家 长 ， 其 
实 从 其 名 字 上 就 能 看 出 点 味道 来 ， 顾名思义 ，font-family 束 是 “字体 
家 族 ” 的 意思 。 








font-family 默认 值 由 操作 系统 和 浏览 器 共同 决定 ， 例 如 Windows 
和 OS 义 下 的 Chrome 默 认 字 体 不 一 样 ， 同 一 台 Windows 系 统 的 Chrome 和 
Firefox 浏 览 器 默认 字体 也 不 一 样 。 





font-family 支持 两 类 属性 值 ， 一 类 是 “字体 名 ”， 一 类 是 “字体 
族 ”。“ 字 体 名 ”很 好 理解 ， 束 是 使 用 的 对 应 字体 的 名 称 。 例 如 : 








body { 
font-family: simsun; 


} 





就 表示 使 用 的 是 “宋体 ”。 如 果 字 体 名 包含 空格 ， 需 要 使 用 引号 包 起 来 。 
例如 : 





body { 
font-family: "Microsoft Yahei ; 
} 


根据 我 的 实践 ， 可 以 不 用 区 分 大 小 写 。 如 宁 有 多 个 字体 设 定 ， 从 左 往 右 





依次 寻找 本 地 是 否 有 对 应 的 字体 即 可 。 例 如 : 


body { 
font-family: "PingFang SC', 'Microsoft Yahei'; 


} 











就 是 先 寻 找 是 否 本 地 有 PingFang SC 字体 ; 如 果 没 有 ， 则 继续 寻找 本 地 
是 否 有 Microsoft Yahei 字 体 ， 如 果 都 没 找 到 ， 就 使 用 默认 值 。 


但 是 ,，“ 字 体 族 ” 分 为 很 多 类 ，MDN 上 文档 分 类 如 下 : 


font-family: serif; 
font-family: sans-serif; 
font-family: monospace; 
font-family: cursive; 


font-family: fantasy; 
font-family: system-ui; 





具体 合 义 解释 如 下 。 


。 serif: 衬 线 字 体 。 

。 sans-serif: 无 衬 线 字 体 。 
e。monospace: 等 宽 字 体 。 

。 cursive: 手写 字体 。 

。 fantasy: 奇幻 字体 。 

。 system-ui: 系统 UI 字 体 。 








对 于 中 文 网 站 ，cursive 和 fantasy 应 用 场景 有 限 ， 因 此 这 里 不 予 
探讨 ， 这 里 痢 重 介绍 一 下 衬 线 字 体 、 无 衬 线 字 体 和 等 宽 字 体 。 


8.2.1 了 解 衬 线 字 体 和 无 衬 线 字体 


字体 分 衬 线 字 体 和 无 衬 线 字 体 。 所 谓 衬 线 字 体 ， 通 俗 讲 就 是 笔画 开 
始 、 结 束 的 地 方 有 额外 装饰 而 且 笔 国 的 粗细 会 有 所 不 同 的 字体 。 网 页 中 
第 用 中文 衬 线 字 体 是 “宋体 ”， 第 用 英文 衬 线 字 体 有 Times New Roman、 
Georgia 等 。 无 衬 线 字体 没有 这 些 额 外 的 装饰 ， 而 且 笔画 的 粗细 差 不 
多 ， 如 中 文 的 “ 雅 黑 ?字体 ， 喘 文 包 括 Arial、Verdana、Tahoma、 


Helivetica、Calibri 等 。 








以 前 人 们 排 正 文 喜欢 使 用 衬 线 字体 ， 但 是 如 今 ， 不 知 是 审美 疫 邢 还 
古人 们 更 加 追求 简 少 干净 的 缘故 ， 更 喜欢 使 用 无 衬 线 字 体 ， 如 “微软 雅 
黑 ? 或 者 “ 毕 方 ”之 类 的 字体 。 





在 CSS 世 界 中 ， 字 体 是 有 对 应 的 属性 值 的 ， 如 下 : 


font-family: serif; /* 衬 线 字体 */ 


font-family: sans-serif; /* 无 衬 线 字 体 */ 





我 们 在 移动 端 Web 开 发 的 时 候 ， 虽 然 设 备 的 默认 中 文字 体 不 一 样 ， 
但 都 是 无 衬 线 ， 都 挺 好 看 的 ， 因 此 可 以 直接 使 用 下 面 的 CSS 代 码 : 





body { 
font-family: sans-serif; 


} 








没有 必要 特别 指定 中 文字 体 ， 否 则 说 不 定 会 画蛇添足 。 


serif 和 sans-serif 还 可 以 和 具体 的 字体 名 称 写 在 一 起 ， 例 如 : 





body { 
font-family: "Microsoft Yahei", sans-serif; 


} 


但 是 需要 注意 的 是 ，serif 和 sans-serif 一 定 要 写 在 最 后 ， 因 为 
在 大 多 数 浏览 器 下 ， 写 在 serif 和 sans-serif 后 面 的 所 有 字体 都 会 被 
忽略 。 例 如 : 


body { 
font-family: sans-serif, "Microsoft Yahei"; 


} 








在 Chrome 浏 览 器 下 ， 后 面 的 Microsoft Yahei 字 体 是 不 会 被 演 染 的 。 据 我 
的 推测 ， 有 可 能 浏览 器 认为 当前 “字体 族 ” 已 经 满足 了 文本 泻 染 的 需要 ， 
没 必要 再 往 后 解析 了 。 


8.2.2 ”等 宽 字体 的 实践 价值 











所 谓 等 宽 字 体 ， 一 般 是 针对 英文 字体 而 言 的 。 据 我 所 知 ， 东 亚 字体 
应 该 都 是 等 宽 的 ， 就 是 每 个 字符 在 同等 font-size 下 占据 的 宽度 是 一 样 





的 。 但 是 英文 字体 就 不 一 定 了 ， 我 随便 写 一 个 单词 ， 就 iMac 吧 ， 大 家 很 
明显 地 发 现 这 个 字符 i 要 比 M 占 据 的 宽度 小 。 如 果 这 样 看 着 还 不 够 清楚 ， 
那 我 换 一 种 呈现 方式 ， 上 下 两 行 ， 上 一 行 6 个 i， 下 一 行 6 个 M， 如 下 : 





111111 


MMMMMM 





实际 的 两 行文 本 的 客 度 可 能 束 如 图 8-6 所 示 这 般 差 异 明显 。 


但 是 ， 如 果 是 等 宽 字 体 〈 可 以 让 英文 字符 同等 宽度 显示 的 字体 就 称 
为 “等 宽 字 体 ”) ， 如 Consolas、Monaco、monospace， 则 宽度 表现 就 不 


一 样 了 ， 如 图 8-7 所 示 。 
Niil 
MMMMMM 
图 8-6“ 非 等 宽 字体 效果 


工 3 工 了 了 
MAMMMMM 


图 8-7 等 宽 字 体 下 的 效果 
等 宽 字 体 在 Web 中 有 什么 用 呢 ? 
1. 等 宽 字 体 与 代码 呈现 


首先 等 宽 字 体 利于 代码 呈现 。 对 于 写 代码 的 人 来 说 ， 无 论 是 什么 语 
0 位 ， 使 用 等 宽 字 体 ， 我 们 陪读 起 来 会 更 轻松 舒服 。 因 

， 一 般 编辑 器 使 用 的 字体 或 者 Web 上 需要 呈现 源 代码 的 字体 都 是 等 宽 
eb 








边框 类 型 : <select class="monospaced"> 


<option value="solid" selected>———————< <“/Option;> 

<Option value="dashed">-------< <“/ option> 

<option value="dotted"> </Option> 
</Sselect> 


<div id="border" class="border"></div> 
图 8-8” 某 源 代码 展示 片段 
2. 等 宽 字 体 与 图 形 呈 现 案 例 一 则 


假设 某 工 具有 这 人 么 一 个 功能 : 通过 下 拉 选 择 ， 可 以 改变 元 素 的 边框 
样式 ， 也 就 是 borderStyle 在 solid/dashed/dotted 间 切 换 。 





大 家 都 知道 ， 原 生 的 <select> 的 <option> 元 素 的 innerHTML 只 
能 是 纯 text 字符 ， 不 能 有 html ， 也 不 支持 伪 元 素 ， 因 此 ， 要 模拟 
solid、dashed 和 dotted ， 只 能 使 用 字符 ， 而 字符 有 长 有 短 ， 可 以 模 
拟 成 像样 的 规整 的 图 形 吗 ? 


可 以 的 ， 试 试 使 用 等 宽 字 体 。 手 动 输入 http:/demo.cssworld.cn/8/2- 
1.php 或 者 扫 下 面 的 二 维 码 。 最 终 效果 如 网 8-9 所 示 。 








图 8-9 ”等 宽 字 体 模拟 边框 类 型 示意 


3. ch 单位 与 等 宽 字体 布局 


ch 和 em 、rem 、ex 一 样 ， 是 CSS 中 和 字符 相关 的 相对 单位 。 和 ch 
相关 的 字符 是 0， 没 错 ， 就 是 阿拉 伯 数 字 0。1ch 表示 一 个 0 字符 的 宽 





度 ， 所 以 6 个 6 所 占据 的 宽度 就 是 6ch 。 





但 是 我 们 网 页 内 容 的 字符 不 可 能 都 是 9 ， 所 以 这 个 单位 乍 看 就 显得 
很 鸡肋 。 但 是 ， 如 果 和 等 宽 字 体 在 一 起 使 用 ， 它 就 可 以 发 挥 不 一 样 的 威 
yar 





由 于 ch 是 个 CSS3 单 位 ， 且 IE9 浏 览 絮 的 客 度 和 其 他 浏览 絮 明 显 不 
样 ， 因 此 此 处 不 展开 ， 但 可 以 提 一 提 一 些 不 错 的 应 用 场景 。 例 如 ， 有 些 
输入 框 是 输入 手机 号 的 ， 在 中 国 ， 手 机 号 是 11 位 ， 因 此 我 们 可 以 设置 该 
输入 框 宽 度 为 11ch ， 同 时 让 字体 等 守 ， 则 用 户 一 眼 就 能 看 出 自己 是 合 
少 输入 或 者 多 输入 了 1 位 数字 。 又 如 ， 我 们 想 实 现 一 个 屏幕 上 代码 一 个 
一 个 出 现 的 动 效 ， 如 果 代 码 是 等 宽 字 体 ， 此 时 使 用 ch 单位 来 控制 宽 
度 ， 配 合 overflow 属性 和 CSS animation 就 能 在 完全 不 使 用 JavaScript 
的 情况 下 将 此 效果 模拟 出 来 。 当 然 ， 还 有 其 他 一 些 应 用 场景 ， 不 一 一 说 
明 。 





8.2.3 中文 字体 和 英文 名 称 


虽然 一 些 常见 中 文字 体 ， 如 宋体 、 微 软 雅 黑 等 ， 直 接 使 用 中 文 名 称 
作为 CSS font-family 的 属性 值 也 能 生效 ， 但 我 们 一 般 都 不 使 用 中 文 
名 称 ， 而 是 使 用 英文 名 称 ， 主 要 是 为 了 规避 乱码 的 风险 。 还 有 一 些 中 文 
字体 直接 使 用 中 文 名 称 作 为 CSS font-family 的 属性 值 是 没有 效果 
的 ， 如 思源 黑体 、 主 宇 黑体 等 ， 需 要 使 用 字体 对 应 的 英文 名 称 才 可 以 生 
效 。 











总 而 言 之 一 句 话 ， 要 想 使 用 中 文字 体 ， 就 必须 要 知道 其 对 应 的 英文 
名 称 。 下 面 束 是 我 整理 的 一 些 常 见 中 文字 体 对 应 的 font-family 英文 





属性 名 称 。 





(1) Windows 篆 见 内 置 中 文字 体 和 对 应 英文 名 称 见 图 8-10。 


字体 中 文 名 字体 英文 名 


宋体 SimSun 
黑体 SimHei 
微软 雅 黑 Microsoft Yahei 


微软 正 黑 体 Microsoft JhengHei 


实体 KaiTi 
新 宋体 NSimSun 
仿宋 FangSong 


图 8-10 ”Windows 中 常见 内 置 中 文字 体 和 对 应 英文 名 称 





(2) OS X 系 统 内 置 中 文字 体 和 对 应 英文 名 称 见 图 8-11。 


字体 中 文 名 字体 英文 名 


苹 方 PingFang SC 
华文 黑体 sTHeiti 

华文 楷体 STKaiti 

华文 宋体 STSong 

华文 仿宋 STFangsong 
华文 中 宋 STZhongsong 


华文 政 珀 STHvupo 
华文 新 魏 STXinwei 
厅 文 习 书 STLiti 


华文 行情 STHinghac 


冬青 黑体 简 Hiragino Sans GB 
兰亭 黑 - 简 Lantinghei SC 
解 翩 体 - 疝 Hanzrpen SC 


手札 体 - 简 Hannotate SC 


宋体 - 简 Songti SC 
娃娃 体 - 简 Wawati SC 
魏 确 - 简 Weibei SC 
行 禄 - 商 Nenghac SC 
雅 病 - 简 Yapi SC 
圆 体 - 简 Yuanti SC 


图 8-11 OS X 常 见 内 置 中 文字 体 和 对 应 英文 名 称 
(3) Office 软 件 安 装 新 增 中 文字 体 和 对 应 英文 名 称 见 图 8-12。 


(4) 其 他 一 些 中 文字 体 和 对 应 英文 名 称 见 图 8-13。 


华文 细 黑 


华文 楷体 


万 下 舒 体 


方正 姚 体 


字体 英文 名 
YouYuan 
LiSua 
sixihei 
STKaiti 
STSong 
STFangsong 
STZhongsong 
SCaeimca 
STHvupo 
STXinwei 
STLiti 
ST7Hirghae 
FZShuTi 


FZYaoti 


图 8-12 ”Office 安 装 新 增 中 文字 体 和 对 应 英文 名 称 


字体 中 文 名 字体 英文 名 
思源 黑体 Source Han Sans CN 
思源 宋体 Source Han Serif SC 


文 录 经 微米 里 ”WenQuanYi Micro Hei 


图 8-13 ”其 他 一 些 中 文字 体 和 对 应 英文 名 称 
8.2.4 一 些 补 充 说 明 


微软 正 黑 体 是 一 款 全 面 支 持 ClearType 技 术 的 TrueType 无 衬 线 字体 ， 
用 于 繁体 中 文系 统 。 相 对 应 地 ， 中 国 大 陆地 区 用 的 是 微软 雅 黑 。 对 于 微 
软 雅 黑 和 微软 正 黑 ， 不 好 简单 地 用 简体 或 者 繁体 来 区 分 ， 因 为 这 两 套 字 
体 都 同时 包含 了 比较 完整 的 简体 和 繁体 汉字 ， 以 确保 在 简体 和 繁体 混 排 
的 页 面 上 能 够 完美 地 显示 。 但 由 于 中 国 大 陆 和 中 国 港 、 澳 、 台 地 区 在 各 
目的 文字 规范 中 对 汉字 的 写法 规定 有 很 多 细节 上 的 不 同 ， 所 以 这 两 套 字 
形 在 正式 场合 是 不 能 混 请 使 用 的 。 

















我 们 平常 所 说 的 “宋体 ”， 指 的 都 是 “中 易 宋 体 ”"， 英 文 名称 
SimSun, “黑体 ”类 似 的 是 “中 易 黑 体 ”。 在 OS X 常 见 内 置 中 文字 体 中 我 罗 
列 了 一 个 “宋体 - 简 ”， 需 要 注意 的 是 ， 这 个 “宋体 - 简 ” 和 我 们 平常 所 说 
的 “宋体 ”并 不 是 同一 个 字体 ， 其 英文 名 称 是 “Songti SC”， 字 形 表 现 也 有 


雷 弄 ， 要 注意 曼 别 。 








在 OS X 也 就 是 苹果 操作 系统 的 字体 名 称 中 经 常会 出 现 “SC”， 这 
个 “SC” 指 的 是 “简体 ”(simplified chinese) 的 意思 ， 相 对 应 的 还 
有 “TC”， 指 的 是 “繁体 ”(traditional chinese) 的 意思 。 


Windows 系 统 本 身 默 认 的 中 文字 体 并 不 多 ， 和 QOS X 操 作 系 统 相 比 述 
色 很 多 ， 尤 其 是 OS X 操 作 系 统 中 的 “ 关 关 人 体 ”“ 手 札 体 ?等 几 个 手写 体 就 非 
常 棒 ! 但 是 好 在 Windows 操 作 系 统 安装 Office 的 比例 相当 高 ， 因 此 如 果 
不 是 要 求 非常 严格 的 话 ， 我 们 还 是 可 以 使 用 很 多 中 文字 体 的 ， 如 “华文 
行 楷 ”“ 华 文 新 魏 ”*“ 华 文 隶 书 ” 等 华文 字体 。 其 中 ,，“ 华 文 黑体 "和 “华文 细 
黑 ” 有 一 段 故事 : OS X 10.6 版 本 之 前 , “华文 黑体 ”由 “华文 细 
黑 ?”(STXihei〉 和 “华文 黑体 ”(STHeiti〉 这 两 个 字 重 组 成 ,但 OS X10.6 














之 后 “华文 黑体 ”重组 ， 就 没有 “华文 细 黑 ”这 么 一 说 了 。 因 此 ， 我 把 “ 华 

文 细 黑 ” 归 在 了 Office 安 装 字 体 一 类 ， 而 将 “华文 黑体 ” 归 在 OS X 之 中 。 根 
据 我 的 测试 ， 这 两 个 字体 并 不 能 随意 互通 有 无 ， 而 且 似 乎 还 与 浏览 器 有 
关系 : OS X 系 统 下 ， 似 乎 Safari 能 够 癌 下 兼容 “华文 细 黑 >，Chrome 却 不 


可 以 ; 反 过 来 ，Windows 系 统 下 ， 无 法 识别 “华文 黑体 ”(STHeiti) 。 又 
或 者 是 使 用 * 圆 体 ”，Windows 系 统 下 有 个 “ 幼 圆 >，OS X 下 有 个 “ 圆 体 - 
简 ”， 都 是 统一 风格 的 字体 ， 也 是 可 以 在 实际 项 目 中 沦 试 使 用 的 。 








所 有 英文 名 称 大 小 写 都 经 过 一 定 的 考量 ， 并 不 是 随便 设 定 的 ， 虽 然 
说 CSS font-family 对 名 称 的 大 小 写 不 怎么 敏感 ， 但 是 根据 我 的 经 
验 ， 最 好 至 少 首 字母 要 大 与 ， 人 否则 在 使 用 CSS unicode-range 的 时 候 
可 能 会 遇 到 一 些 麻烦 。 








“思源 黑体 ”和 “思源 宋体 ”是 Adobe 与 Google 合 作 推 出 的 开源 字体 。 
其 设计 目标 是 可 以 广泛 用 于 多 种 用 途 的 计算 机 字体 ， 比 如 用 于 手机 、 平 
板 或 者 桌面 的 用 户 界 面 、 网 页 浏览 或 者 电子 书 阅读 等 ， 均 包含 7 个 字 
重 。 因 为 思源 黑体 和 思源 宋体 字体 集成 到 Google 的 泛 Unicode 字 体系 列 
《 称 为 Noto) 中 ， 所 以 不 少 网 站 及 资料 会 显示 “思源 黑体 ”英文 名 称 
是 “Noto Sans CJK SC”， 这 是 Google 的 称呼 。 然 和 而， 根据 我 的 测试 ， 这 





种 英文 名 称 在 Windows 和 OS XX 系统 下 都 是 无 效 的 ，Adobe 的 名 称 “Source 
Han Sans CN” 可 以 正常 显示 。 





“ 文 果 驿 微米 黑 是 Google Droid 的 开源 衍生 字体 。Droid 字 体系 是 
Google 包 含 在 著名 的 开源 手机 平台 Android 系 统 中 的 默认 字体 ， 其 中 的 
Droid Sans Fallback 包 含 CJK 标 准 汉字 16000 余 个 ， 是 目前 所 知 为 数 不 多 
的 开源 中 文字 体 之 一 (也 是 继 文 果 驿 正 黑 之 后 第 二 个 开源 中 文 黑 体 ) 。 
由 于 该 字体 的 设计 目标 是 手机 等 租 入 式 设备 ， 与 其 他 常见 中 文字 体 比 
较 ， 其 一 个 显著 的 优点 是 文件 极为 精简 ， 只 有 不 到 3 MB。 





本 节目 前 所 展示 的 或 是 系统 字体 ， 或 是 开源 字体 ， 如 果 和 希望 知道 一 
些 需 要 付费 购买 的 版 权 字 体 的 英文 名 称 ， 如 某 些 汉 仪 字体 或 者 方正 字 
体 ， 可 以 参见 我 的 博客 文章 : http://www.zhangxinxu.com/ wordpress/? 
p=5474 。 





8.3 字体 家 族 其 他 成 员 
8.3.1 ”貌似 粗 久 、 实 则 精细 无 比 的 font-weight 
font-weight 表示 “ 字 重 ”， 通 俗 点 讲 ， 就 是 表示 文字 的 粗细 程度 。 


对 于 font-weight 这 个 属性 ， 我 们 平时 使 用 都 相当 粗 狐 ， 无 非 就 
是 下 面 这 两 个 CSS 声 明 : 


font-weight: normal; 


font-weight: bold; 








以 至 于 很 多 人 就 误 认 为 font-weight 的 作用 就 是 让 文字 加 粗 或 者 


正常 ， 但 实际 上 ，font- weight 这 个 属性 可 谓 “ 张 飞 穿 针 ” 一 一 粗 中 有 
细 ， 而 且 是 精细 无 比 ! 


首先 让 我 们 大 致 了 解 一 下 font-weight 都 支持 哪些 属性 值 。 有 具体 
如 下 : 




















/* 平常 用 的 最 多 的 */ 
font-weight: normal; 
font-weight: bold; 


/* 相对 于 父 级 元 素 */ 
font-weight: lighter; 
font-weight: bolder; 














/* 字 重 的 精细 控制 */ 


font-weight: 1060; 
font-weight: 266; 
font-weight: 3060; 
font-weight: 4060; 
font-weight: 566; 
font-weight: 6060; 
font-weight: 7060; 
font-weight: 8060; 
font-weight: 9060; 





可 以 看 到 ，font-weight 支持 十 多 个 属性 值 ，normal 和 bold 这 
两 个 关键 字 仅仅 是 众多 属性 值 的 冰山 一 角 。 





所 有 这 些 属性 值 ， 都 可 以 从 font-weight:166 至 font- 
weight:966 说 起 。 


e。 166:， 文字 很 细 ， 细 如 发 丝 。 
e。 266: 文字 很 轻 ， 轻 如 鸿毛 。 
。 366: 文字 较 轻 ， 轻 如 飞 巷 。 


e。 466: 文字 正常 ， 等 同 normal。 
。 566: 文字 不 粗 不 细 ， 不 轻 不 重 。 
。 666: 文字 略 粗 ， 粗 如 小 腿 。 

。 766: 文字 加 粗 ， 等 同 bo1d。 

。 866: 文字 超 粗 ， 粗 如 大 腿 。 

。 966:， 文字 很 重 ， 重 如 泰山 。 











有 人 可 能 会 有 疑问 : 我 是 不 是 可 以 自 创 一 个 font-weight:556 的 
写法 ? 答案 是 : 不 可 以 。 如 果 使 用 数值 作为 font-weight 属性 值 ， 必 
须 是 166 一 986 的 整 百 数 。 因 为 这 里 的 数值 仅仅 是 外 表 长 得 像 数值 ， 实 
际 上 是 一 个 具有 特定 含义 的 关键 字 ， 并 且 这 里 的 数值 关键 字 和 字母 关键 
字 之 间 是 有 对 应 关系 的 ， 例 如 ，font -weight:466 实际 上 等 同 于 
font-weight: normal ，font-weight:766 等 同 于 font- 
weight:bold 。 因 此 ， 如 果 我 们 希望 让 某 些 文字 的 粗细 变 得 正常 ， 也 
可 以 使 用 font-weight:466 ， 与 使 用 normal 相 比 少 了 3 个 字母 ; 同 
样 ， 如 果 和 希望 文字 加 粗 ， 也 可 以 使 用 font-weight:766 ， 与 使 用 bo1d 
相 比 少 了 1 个 字母 。 





因此 ， 很 显然 ，466 和 766 是 文字 粗细 与 否 的 重要 临界 点 ， 加 上 最 
小 的 168 和 最 大 的 988 ， 就 构成 了 font-weight 完整 的 字 重 临界 点 。 知 
道 这 个 有 什么 意义 呢 ? 意义 就 在 于 ，1lighter 和 bolder 这 两 个 具有 相 
对 特定 的 关键 字 就 是 基于 这 4 个 临界 点 进行 解析 和 泻 染 的 。 





这 里 有 必要 再 强调 一 下 ，1ighter 和 bolder 是 基于 临界 点 进行 解 
析 的 ， 千 万 不 要 想当然 地 认为 是 根据 当前 字 重 上 下 166 加 加 减 减 后 的 效 
果 。 例 如 ， 先 font-weight:169， 然 后 再 font-weight:bolder 后 的 








font-weight 计算 大 小 是 466 ， 而 不 是 1686 。 完 整 解析 关系 参见 表 8- 
1 。 





表 8-1 1ighter 和 bolder 解析 规则 表 





466 166 





下 面 关 键 问 题 来 了 。 很 多 人 会 发 现 ，font-weight 无 论 是 设置 366 


、466 、566 还 是 668 ， 文 字 的 粗细 都 没有 任何 变化 ， 只 有 到 766 的 时 
候 才 会 加 粗 一 下 ， 感 觉 浏览 器 好 像 不 支持 这 些 数值 ， 那 么 搞 这 么 多 档 位 
不 就 是 多 余 的 吗 ? 


实际 上 ， 所 有 这 些 数值 关键 字 浏 览 器 都 是 支持 的 ， 之 所 以 没有 看 到 
任何 粗细 的 变化 ， 是 因为 我 们 的 系统 里 面 缺乏 对 应 粗细 的 字体 。 尤 其 我 
们 做 果 面 端 项 目 时 ， 大 部 分 用 户 都 是 使 用 Windows 系 统 ， ee 
统 中 的 中 文字 体 粗细 就 一 个 型 号 ， 如 “宋体 ”， 或 者 说 “微软 雅 黑 ”， 

此 ， 最 终 的 效果 就 是 CSS 层 面 的 “加 粗 * 和 “正常 尺寸 "两 种 表现 。 








假如 我 们 的 操作 系统 安装 了 该 字体 家 族 全 部 的 字 重 字体 ， 则 设置 
300、400、500 时 ， 彼 此 之 间 就 能 看 出 明显 的 变化 了 。 例 如 ，OS X 系 统 
中 的 “ 苹 方 ”， 又 如 我 这 里 即将 要 演示 的 “思源 黑体 ”。 “思源 黑 体 ” 是 一 款 
免费 的 开源 字体 ， 我 自己 电脑 上 的 版 本 有 7 个 字 重 ， 如 图 8-14 所 示 。 


| SourceHanSansCN-Bold.otf 
SourceHanSansCN-ExtraLight.otf 
,SourceHanSansCN-Heavy.otf 

»_ SourceHanSansCN-Light.otf 
SourceHanSansCN-Medium.otf 

| SourceHanSansCN-Normal.otf 


SourceHanSansCN-Regular.otf 





图 8-14 “思源 黑体 ”7 个 不 同 字 重 的 字体 








此 时 ， 应 用 如 下 HTML 和 CSS 代 码 : 


















































<p class="f166"> 轻 如 鸿毛 ， 重 如 泰山 </py> 
<p class="f266"> 轻 如 鸿毛 ， 重 如 泰山 </p> 
<p class="f366"> 轻 如 鸿毛 ， 重 如 泰山 </py> 
<p class="f466"> 轻 如 鸿毛 ， 重 如 泰山 </py> 
<p class="f566"> 轻 如 鸿毛 ， 重 如 泰山 </py> 
<p class="f666"> 轻 如 鸿毛 ， 重 如 泰山 </py> 
<p class="f766"> 轻 如 鸿毛 ， 重 如 泰山 </py> 














<p class="f866"> 轻 如 鸿毛 ， 重 如 泰山 </py> 
<p class="f966"> 轻 如 鸿毛 ， 重 如 泰山 </py> 
p { font-family: "Source Han Sans CN'; } 


.f166 { font-weight: 166; } 
.f266 { font-weight: 2660; } 
.f366 { font-weight: 366; } 
.f466 { font-weight: 4660; } 
.f566 { font-weight: 566; } 
.f666 { font-weight: 666; } 
.f766 { font-weight: 766; } 
.f866 { font-weight: 8660; } 
.f966 { font-weight: 966; } 





结果 可 以 看 到 明显 的 字 重 变化 ， 而 不 是 单纯 的 加 粗 和 正常 两 种 形态 ， 如 
图 8-15 所 示 。 


轻 如 鸿毛 ， 重 如 泰山 


轻 如 鸿毛 ， 
轻 如 鸿毛 ， 
轻 如 鸿毛 ， 
轻 如 鸿毛 ， 
轻 如 鸿毛 ， 


重 如 泰山 
重 如 泰山 
重 如 泰山 
重 如 泰山 
重 如 泰山 


轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 
轻 如 鸿毛 ， 重 如 泰山 


图 8-15 “思源 黑体 ”在 CSS 不 同 font-weight 值 下 的 效果 


也 束 是 说 ，font-weight 要 想 真 正 发 挥 潜力 ， 问 题 不 在 于 CSS 的 支 
持 ， 而 在 于 是 否 存 在 对 应 的 字体 文件 。 如 果 没 有 对 应 的 字体 文件 ， 我 勾 
想 有 多 档 字 重 效果 ， 该 怎么 办 呢 ? 可 以 试 试 去 8.5 节 看 看 能 不 能 找到 答 











案 。 
8.3.2 ”具有 近似 姐妹 花 属性 值 的 font-style 


font -style 表示 文字 造型 是 斜 还 是 正 ， 与 font-weight 相 比 ， 其 
属性 值 就 要 少 很 多 ， 如 下 : 


font-style: normal; 
font-style: italic; 


font-style: oblique; 





其 中 ，italic 和 oblique 这 两 个 关键 字 都 表示 “和 斜体 ”的 意思 ， 可 以 说 
是 一 对 姐妹 花 属 性 。 但 就 好 比 双 胞 胎 一 样 ， 就 算 长 得 再 像 也 会 有 差别 ， 
那么 italic 和 ob1lique 这 两 个 关键 字 的 差别 在 哪里 呢 ? 


差别 在 于 : italic 是 使 用 当前 字体 的 斜体 字体 ， 而 oblique 只 是 
单纯 地 让 文字 倾斜 。 如 果 当 前 字体 没有 对 应 的 斜体 字体 ， 则 退 而 求 其 
次 ， 解 析 为 oblique ， 也 就 是 单纯 形状 倾斜 。 


我 们 平常 在 Web 上 使 用 比较 多 的 中 文字 体 ， 如 “宋体 ”微软 雅 
黑 ” 等 ， 是 没有 专门 的 倾斜 字体 的 ， 因 此 ， 从 最 终 表现 上 来 看 font- 
style:italic 和 font-style:oblique 是 没有 区 别 的 。 但 是 ， 对 于 一 
些 贡 文字 体 ， 如 “Georgia”， 情 况 束 不 一 样 了 ， 因 为 “Georgia” 有 一 个 专 
门 设 计 的 斜体 字体 文件 。 我 们 不 妨 简 单 测试 一 下 ， HTML 和 和 CSS 代码 如 
下 : 














<p class="i">Georgia italic</p> 
<p class="0">Georgia oblique</p> 
<p>Georgia normal</p> 


p { font-size: S58px; font-family: Georgia; } 
.i { font-style: italic; } 
.0 { font-style: oblique; } 











结果 可 以 看 出 ， 两 个 “ 倾 冬 ”* 有 痢 明显 的 不 同 ， 例 如 非常 明显 的 字母 g， 


属性 值 为 jtalic 时 长 得 像 鱼 钧 ， 而 为 oblique 时 长 得 像 糖 葫芦 ， 如 图 
8-16 所 示 。 


Georgia italic 
Georg1a oblique 
Georgla normal 


图 8-16 “Georgia” 字 体 不 同 的 “倾斜 ”效果 


之 所 以 会 专门 为 一 个 字体 设计 倾斜 字体 ， 就 是 因为 单纯 倾 笠 的 时 候 
不 好 看 ， 比 方 说 上 面 的 “Georgia" 字 体 ， 当 字号 比较 小 同时 文字 倾斜 的 时 
候 ， 字 符 会 挤 作 一 团 ， 下 密 不 规则 ， 可 读 性 比较 糟糕 。 相 比 之 下 ， 专 门 
设计 的 “Georgia” 和 斜体 阅读 体验 就 要 好 很 多 。 再 加 上 没有 和 斜体 字体 时 
italic 表现 会 和 oblique 一 致 ， 因 此 ， 我 们 在 实际 开发 的 时 候 ， 几 乎 
没有 任何 理由 需要 使 用 font-style:oblique。 











8.3.3 ”不 适合 国情 的 font-variant 


font-variant 是 一 个 从 IE6 时 代 就 过 来 的 CSS 属 性 ， 对 于 我 们 大 中 
华 用 户 ， 其 支持 的 属性 值 和 作用 让 我 们 这 些 汉字 用 户 觉得 有 些 头 疼 ， 实 
现 小 体型 大 写字 母 ， 两 个 属性 值 要 么 normal， 要 么 small-caps 
，font-variant:small-caps 就 是 可 以 让 英文 字符 表现 为 小 体型 大 写 
字母 。 











代码 示意 如 下 : 


http://www.<span style="font-variant:small-caps">css-world.com</span>/ 





结果 如 下 : 


http://WWWw.css-WoRLD.coM 

也 就 是 大 小 跟 小 写字 母 一 样 ， 但 样式 是 大 写 ， 我 想 在 母语 是 英文 的 国家 
这 个 属性 估计 都 用 得 不 多 ， 所 以 ， 大 家 简单 了 解 一 下 就 可 以 了 。 

8.4 font 属性 


8.4.1 ”作为 缩写 的 font 属性 


如 果 在 一 段 CSS 代 码 中 发 现 了 font 属性 ， 八 九 不 离 十 就 是 利 
用 font 属性 进行 文本 相关 样式 的 缩写 。 可 以 缩写 在 font 属性 中 的 属性 
非常 多 ， 包 括 font-style 、font-variant 、font-weight 、font- 


size 、line-height 、font-family 等 。 完 整 语法 为 : 





[ [ font-style || font-variant || font-weight ]? font-size [ / line-height 
? 


font-family ] 





| | 表示 或 ，” 和 正则 表达 式 中 的 ?的 含义 一 致 ， 表 示 0 个 或 1 个 。 仔 
细 观 察 上 面 的 语法 ， 会 发 现 font-size 和 font-family 后 面 没有 问 
写 ， 也 就 是 说 是 必需 的 ， 是 不 可 以 省 略 的 。 这 和 background 属性 不 一 
样 ，background 属性 虽然 也 支持 缩写 ， 但 是 并 没有 需要 两 个 属性 值 同 
时 存在 的 限制 。 








因此 ， 如 果 你 的 font 属性 缩写 无 效 ， 检 查 一 下 font-size 和 











font-family 这 两 个 属性 是 否 同时 存在 。 例 如 ， 下 面 CSS 语 句 看 上 去 写 
了 很 多 属性 ， 实 际 却 是 无 效 的 ， 因 为 缺 字 体 : 


.font { font: normal 766 14px/26px; } 


而 下 面 这 个 反而 是 有 效 的 : 


.font { font: 14px '8'; } 


需要 注意 的 是 ，font 缩写 会 令 坏 部 分 属性 的 继承 性 。 举 个 简单 的 
例子 ， 假 设 你 的 页 面 行 高 是 20px ， 当 你 使 用 了 下 面 的 CSS 后 : 


.font { font: 466 36px 'Microsoft Yahei'; } 


.font 元 素 的 行 高 Line-height 属性 值 就 被 重 置 为 了 normal ， 而 不 同 
浏览 器 上 1ine- height:normal 是 不 一 样 的 ， 因 此 ， 在 使 用 font 缩写 
的 时 候 ， 如 果 不 设 定 行 高 值 ， 一 定 会 出 现 不 兼容 的 问题 。 换 名 话说， 如 
果 你 的 CSS 代 码 原本 就 没有 line-height 属性 ， 使 用 font 缩写 反而 是 

不 推荐 的 。 











另外 ， 还 有 一 个 令 人 很 头疼 的 问题 ， 就 是 font 缩写 必须 要 带 
上 font-family ， 然 而 ， 原 本 真实 继承 的 font-family 属性 值 可 能 会 
很 长 ， 每 次 font 缩写 后 面 都 挂 一 个 长 长 的 字体 列表 ， 令 人 很 是 不 悦 ， 
有 什么 小 技巧 可 以 避免 吗 ? 


这 里 有 两 个 方法 。 





方法 一 : 我 们 可 以 随便 找 一 个 系统 根本 不 存在 的 字体 名 占 位 ， 如 字 
母 9， 或 者 特殊 一 点 ， 用 笑脸 表情 @ ， 然 后 再 设置 font- 
family:inherit 来 重 置 这 个 占 位 字体 。 例 如 ， 我 们 想 把 字号 和 行 高 合 
并 缩写 ， 就 可 以 这 样 : 





.font { 
font: 36pXx/36pX '“ 8 


font-family: inherit; 


} 








是 不 是 有 点 拆 东 墙 补 西 墙 的 感觉 ? 这 么 做 主要 是 因为 font 缩写 不 
能 使 用 inherit 等 全 局 关键 字 。 





方法 二 : 利用 @font face 规则 将 我 们 的 字体 列表 重 定 义 为 一 个 字 
体 ， 这 是 兼容 性 很 好 、 效 益 很 高 的 一 种 解决 方法 ， 会 在 8.5 节 详细 介 


绍 。 


8.4.2 ”使 用 关键 字 值 的 font 属性 


font 属性 除了 缩写 用 法 ， 还 文 持 关键 字 属 性 值 ， 这 个 怕 是 很 多 人 
都 不 知道 的 。 其 语法 如 下 : 


font:caption | icon | menu | message-box | small-caption | status-bar 





如 果 将 font 属性 设置 为 上 面 的 一 个 值 ， 就 等 同 于 设置 font 为 操作 
系统 该 部 件 对 应 的 font ， 也 就 是 说 直接 使 用 系统 字体 。 


根据 W3C 官 方 维基 的 解释 ， 以 及 我 自己 在 Windows 系 统 下 的 测试 ， 
各 个 关键 字 的 含义 如 下 。 


caption: 活动 窗口 标题 栏 使 用 的 字体 。 

icon: 包含 图 标 内 容 所 使 用 的 字体 ， 如 所 有 文件 夹 名 称 、 文 件 名 
称 、 磁 盘 名 称 ， 甚 至 浏览 器 窗口 标题 所 使 用 的 字体 。 

menu: 羔 蛙 使 用 的 字体 ， 如 文件 夹 琳 单 。 

message-box: 消息 盒 里 面 使 用 的 字体 。 

small-caption: 调 色 板 标题 所 使 用 的 字体 。 

status-bar: 窗 体 状态 栏 使 用 的 字体 。 


使 用 示例 : 


menu { font: menu; } 





需要 注意 的 是 ， 使 用 关键 字 作 为 属性 值 的 时 候 必 须 是 独立 的 ， 不 能 
添加 font-family 或 者 font-size 之 类 的 ， 这 和 font 属性 缩写 不 是 一 
个 路 子 。 如 果 混 用 ， 例 如 : 


.menu { font: 14px menu; } 


则 此 时 的 menu 是 作为 自 定 义 的 字体 名 称 存在 的 ， 而 不 是 表示 系统 的 
menu 菜单 字体 。 








实际 上 ，font 关键 字 属 性 值 本 质 上 也 是 一 种 缩写 ， 里 面 已 经 包含 
了 诸如 font-size 等 信息 ， 如 图 8-17 一 图 8-19 所 示 。 


司 用 的 系统 字体 关键 字 是 ，caption 
司 用 的 系统 字体 关键 了 字 是 icon 


使 用 的 系统 字体 关键 字 是 : message-box 
舍 记 的 系统 字体 关 馆 字 旦 : small-caption 


停 户 的 系统 字 仁 关 镀 字 旦 ; status-bar 


图 8-17 Windows 7 Chrome 下 font 关 键 字 属性 值 效 果 





使 用 的 系统 字体 关键 字 是 : caption 

使 用 的 系统 字体 关键 字 是 : icon 

使 用 的 系统 字体 关键 字 是 : menu 

使 用 的 系统 字体 关 欠 字 是 : message-box 
使 用 的 系统 字体 关键 字 是 : small-caption 
使 用 的 系统 字体 关键 字 是 : status-bar 


图 8-18 Windows 7 IE 浏 览 器 font 关键 字 属 性 值 效果 





这 3 张 图 透露 出 不 少 重要 的 信息 。 从 Windows 下 Chrome 和 IE 浏 览 器 
部 分 关键 字 的 字体 和 字号 表现 不 一 样 可 以 看 出 ， 同 一 系统 下 浏览 器 的 表 
出 是 有 差异 的 。 就 这 么 一 说 ， 好 像 也 没什么 ， eo 
就 会 发 现 这 背后 是 有 问题 的 : 既然 font 关键 字 属 性 值 的 样式 表现 是 
着 系统 走 的 ， 那 为 何 同一 Ce - 样 呢 ? 
某 个 浏览 器 出 现 了 问题 。 后 来 ， 通 过 设置 修改 Windows 系 统 相 关 控 件 的 
默认 字体 我 发 现 ， 这 次 是 Chrome 浏 览 器 拖 了 后 腿 。caption 、icon 
、message-box 这 3 个 关键 字 在 Windows 系 统 下 的 Chrome 浏 览 器 中 似乎 
是 无 效 的 ， 并 不 会 实时 跟着 系统 字体 走 ， 也 就 是 说 ， 就 算 手动 修改 了 操 
作 系 统 的 字体 ， 这 3 个 关键 字 还 是 显示 浏览 器 默认 的 宋体 ， 就 算 浏 览 器 
重启 、 浏 览 器 升级 外 加 系统 重启 也 没有 用 ; 而 且 ，menu 这 个 关键 字 表 








示 的 并 不 是 “ 衣 单 "， 而 是 “ 调 色 板 标 题 *small-caption 。 而 所 有 这 些 问 
题 在 Firefox 和 下 浏览 器 中 一 个 都 没有 ， 表 现 非常 一 致 ， 非 常 符合 预期 ， 
例如 ， 修 改 “ 图 标 ” 字 体 为 “思源 黑体 ”， 如 图 8-20 所 示 ， 则 所 有 文件 名 称 
全 部 变 成 了 “思源 黑体 "”， 同 时 font :icon 所 在 元 素 font-family 计算 
值 也 成 了 “思源 黑体 ”， 如 图 8-21 所 示 。 


使 用 的 系统 字体 关键 字 是 : caption font-size:13px; 

使 用 的 系统 字体 关键 字 是 : icon font-size:13px; 

使 用 的 系统 字体 关键 字 是 : menu font-size:13px; 

使 用 的 系统 字体 关键 字 是 : message-box font-size:13px; 
使 用 的 系统 字体 关键 字 是 : small-caption font-size:12px; 


使 用 的 系统 字体 关键 字 是 : status-bar font-size:12px; 


图 8-19 ”OS X Chrome 下 font 关键 字 属 性 值 效果 








项 目 人 DD): 大 小 (DD): 

图 标 ~ 32 丹 
字体 (FP): 大 小 (E): 

| 思源 黑 休 CN Normal -| 24 -| 





图 8-20 ”设置 系统 “图 标 项 目 ” 字 体 为 “思源 黑体 ” 
使 用 的 系统 字体 关键 字 旺 : icon font-size:12px font-famil 
图 8-21 ”font :icon 表现 为 “思源 黑体 ” 


考虑 到 Chrome 浏 览 器 的 市 场 占 有 率 ， 我 们 在 使 用 font 属 性 的 时 
候 ， 要 避 开 caption 、icon 和 message-box 这 3 个 关键 字 。 


对 于 不 同 的 操作 系统 ， 字 体 表现 不 一 样 ， 这 是 预料 之 中 的 ， 毕 竟 使 
用 系统 字体 ， 而 不 同系 统 默 认 字 体 肯 定 是 不 一 样 的 ， 然 后 字体 大 小 也 不 


一 样 。 例 如 ， 在 Windows 下 Chrome 的 caption 字体 大 小 16px ， 而 在 OS 
XX 下 却 只 有 13px 。 因 此 ， 在 实际 使 用 时 ， 我 们 还 需要 在 一 下 面 再 设 定 一 
下 font-size 大 小 来 保证 一 致 性 。 照 理 讲 ， 直 接 这 样 设 置 就 可 以 了 : 


html { 
font: menu; 


font-size: 16px; 


} 





但 是 ， 实 际 上 ，IE8 浏 览 器 会 英名 其 妙 地 忽略 这 里 的 font-size:16px 
， 因 此 ， 一般 都 是 下 面 这 样 处 理 : 


html { font: menu; } 
body { font-size: 16px; } 


除了 caption 、icon 、menu 、message-box 、smal1-caption 
和 status-bar， 还 有 很 多 其 他 非 标准 的 关键 字 ， 如 button 
、Checkbox 、checkbox-group 、combo-box 、desktop 、dialog 
、 document 、field、hyperlink、1list-menyu、menu-item 
、menubar 、outline-tree 、password 、pop-up-menu 、pull- 
down-menu 、push-button 、radio-button 、radio-group 
、range 、signature 、tab 、tooltip 、window 和 workspace 。 不 
过 ， 这 些 关 键 字 浏 览 器 大 多 不 支持 ， 尽 管 Firefox 浏 览 器 支持 一 部 分 ， 但 

需要 添加 私有 前 缀 -moz- 。 例 如 : 


font: -moz-button ; 


因此 ， 它 们 的 实际 应 用 价值 不 大 。 另 外 ，WebKit 浏 览 器 还 文 持 其 他 关键 


字 ， 如 font : -webkit- control ， 如 图 8-22 所 示 。 


a ee 

, |-webkit-body 
-Webkit-control 

bodv, .di-webkit-mini-control 
colorj -webkit-pictograph 

J -webkit-small-control 

body -webkit-xxx-large 


font: |-webki ed 
地 -wehkie FAT ent antiali 


图 8-22 ” WebKit 支持 的 font 关键 字 属 性 值 





这 些 私 有 关键 字 的 价值 仪 限 于 了 解 。 
8.4.3 ”font 关键 字 属 性 值 的 应 用 价值 


说 了 这 么 多 ，font 关键 字 属性 值 的 价值 如 何 呢 ? 有 没有 合适 的 使 
用 场景 呢 ? 有， 并 且 相 当 适 合 ! 


目前 ， 非 常 多 网 站 的 通用 font-family 直接 就 是 : 


html] { font-family: "Microsoft YaHei'; } 


知道 问题 在 哪里 吗 ? 这 样 一 设置 ， 就 意味 着 所 有 操作 系统 下 的 所 有 
浏览 器 都 要 使 用 “微软 雅 黑 ? 字 体 。 假 如 说 用 户 的 iMac 或 者 macbook 因 为 
某 些 原因 安装 了 “微软 雅 黑 ”字体 ， 那 吕 不 是 这 些 系 统 原本 更 加 漂亮 的 中 
文字 体 就 不 能 使 用 了 ? 





于 是 ， 人 们 就 会 有 这 样 的 需求 : 而 望 非 Windows 系 统 下 不 要 使 
用 “微软 雅 黑 * 字 体 ， 而 是 使 用 其 系统 字体 。 怎 么 处 理 呢 ? 


一 种 方法 是 可 以 试 试 使 用 非 标准 的 -apple-system 等 关键 字 字 


体 ， 有 具体 方法 如 下 : 


html { font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei'; } 








这 能 够 一 定 程 度 上 满足 我 们 的 需求 ， 但 是 毕 竞 是非 标 准 的 属性 值 ， 
说 不 定 哪 天 就 被 浏览 器 舍 寞 了 ， 因 此 吞 非 迫不得已 ， 还 是 少 用 为 妙 。 








顺便 多 说 两 句 ， 实 际 上 还 真有 标准 的 系统 字体 关键 字 ， 叫 
作 system-ui ， 使 用 示例 如 下 : 


html { font-family: system-ui; } 


在 我 写 这 段 内 容 的 时 候 ， 仅 Chrome 浏 览 器 支持 它 〈 从 版 本 56 开 
始 ) ， 并 且 ， 根 据 我 的 在 Windows 电 脑 上 的 测试 ，Chrome 浏 览 器 的 
system-ui 指 的 就 是 “ 调 色 板 标 题 *? 对 应 关键 字 small-caption 使 用 的 
字体 ， 有 点 儿 出 乎 我 的 意料 。 





压轴 的 总 在 最 后 ， 显 然 还 有 个 更 好 的 方法 就 是 使 用 这 里 的 font 天 
键 字 ， 这 是 标准 属性 ，10 年 前 浏览 器 就 支持 了 ， 可 以 放心 使 用 。CSS 代 
人 码 如 下 (三 选 一 即 可 ) ’ 

font: menu; } 
font-size: 16px; } 


font: small-caption; } 


font-size: 16px; } 


font: status-bar; } 
font-size: 16px; } 





没有 洋洋 酒 酒 的 字体 列表 ， 简 简单 单 的 儿 个 声明 就 可 以 让 各 个 系统 
使 用 各 自 引 以 为 傲 的 字体 。 有 人 说 “我 有 选择 枣 惧 症 ， 不 知 该 使 用 哪 一 
个 "， 那 束 选 最 短 最 好 记 的 那个 : 


html { font: menu; } 
body { font-size: 16px; } 


最 后 ， 我 要 对 font 关键 字 属 性 值 的 用 法 做 一 个 点 评 。 





让 网 页 的 字体 跟 系 统 走 ， 对 设计 师 而 言 ， 其 实 是 一 个 比较 冒险 的 做 
法 ， 因 为 最 终 呈现 的 字体 是 不 可 控 的 。 举 个 例子 ， 某 女生 非常 喜欢 可 爱 
风格 ， 于 是 就 把 她 的 电脑 主题 变 成 了 非常 可 爱 的 风格 ， 沈 单 栏 的 字体 全 
部 变 成 那 种 很 可 爱 的 字体 ， 此 时 ，font :menu 所 呈现 的 就 不 是 “微软 雅 
黑 ”， 而 是 这 个 用 户 定义 的 “可 爱 字 体 ”"， 这 可 能 不 是 设计 师 想 看 到 的 ， 
因为 往往 会 跟 自己 的 网 页 设计 风格 不 一 至。 但 是 ， 转 念 一 想 ， 万 一 这 是 
用 户 想 看 到 的 呢 ? 既 然 用 户 把 自己 的 主题 设 为 该 字体 ， 那 就 说 明 这 个 用 
户 对 这 个 字体 并 不 排斥 ， 而 是 喜欢 。 当 她 浏览 网 页 的 时 候 ， 发 现 就 你 的 
网 站 呈现 出 了 她 喜欢 的 那 种 字体 ， 你 说 会 不 会 给 用 户 一 种 "你 懂 我 的 
心 ”? 的 感觉 呢 ? 对 用户 而 言 ， 反 而 成 了 一 种 情感 化 的 设计 ! 











另外， 让 网 页 的 字体 跟 系统 走 ， 还 有 一 个 更 加 长 远 的 好 处 。 随 着 软 
件 的 不 断 发 展 ， 我 们 的 操作 系统 的 默认 中 文字 体 一 定 是 越 来 越 好 看 ， 如 
果 网 页 的 font-family 定 死 为 某 个 字体 ， 用 户 就 无 法 及 时 享受 到 新 系 
统 新 字体 市 来 的 愉悦 的 视觉 感受 。 举 个 例子 ，OS X 的 默认 中 文字 体 其 
实 已 经 变 过 好 多 次 了 ， 例 如 ， 你 今天 写 了 个 页 面 ， 字 体 设置 为 很 淹 
的 “ 苹 方 "”” 过 两 年 说 不 定 会 出 来 更 好 的 名 叫 “ 梨 方 * 的 字体 ， 我 打包 票 ， 
网 站 绝对 是 不 会 跟 进 的 ， 因 为 大 多 数 的 线 上 项 目 维护 都 不 会 管 font- 











family 这 种 边 边 角 角 的 事情 ， 因 此 ， 束 算 很 多 年 过 去 了 ， 网 站 使 用 的 
依然 是 老 字 体 。 但 是 ， 如 果 使 用 的 是 font 关键 字 属 性 值 ， 就 完全 不 会 
有 这 样 的 问题 ， 网 站 字体 能 时 时 刻 刻 与 时 俱 进 。 


8.5 ”真正 了 解 @font face 规则 


很 多 人 只 要 一 提 到 @font face 规则 ， 心 中 就 会 不 由 自主 “ 哦 ”地 一 
声 :“ 这 个 我 知道 ， 可 以 用 来 生成 自 定义 字符 小 图 标 ! ” 话 是 没 错 ， 问 题 
在 于 很 多 人 以 为 生成 字符 小 图 标 就 是 @font face 规则 的 全 部 ， 实 际 上 
这 只 是 其 功能 之 一 ， 一旦 真正 了 解 @font face 规则 ， 你 会 发 
现 ，@font face 规则 可 以 做 的 事情 其 实 非 常 多 。 








8.5.1 @font face 的 本 质 是 变量 


虽然 说 CSS3 新 世界 中 才 出 现 真正 意义 上 的 变量 var ， 但 实际 上 ， 在 
CSS 世 界 中 己 经 出 现 了 本 质 上 就 是 变量 的 东西 ，@font face 规则 就 是 
其 中 之 一 。@font face 本 质 上 就 是 一 个 定义 字体 或 字体 集 的 变量 ， 这 
个 变量 不 仅仅 是 简单 地 自 定义 字体 ， 还 包括 字体 重 命名 、 默 认 字体 样式 


设置 等 。 














@font face 规则 文 持 的 CSS 属 性 有 font-family 、src 、font- 
style 、font-weigh 、unicode-range、font-variant 、font- 


stretch 和 font-feature-settings 。 例 如 : 





@font-face { 
font-family: 'example'; 
src: url(example.ttf); 
font-style: normal; 
font-weight: normal; 


unicode-range: U+6625-66FF ; 
font-variant: small-caps; 
font-stretch: expanded; 
font-feature-settings: "ligal" on; 





属性 还 是 挺 多 的 ， 而 且 有 些 属性 估计 是 他 认识 你 ， 你 不 认识 他 。 但 





是 从 实用 角度 来 讲 ， 有 些 属 性 其 实 可 以 不 用 去 深究 ， 比 如 font- 
variant 、font-stretch 和 font-feature- settings 这 3 个 属性 。 
为 什么 呢 ? 因为 按照 我 的 经 验 ， 这 3 个 属性 给 我 感觉 更 像 是 专 为 贡 文 设 
计 的 ， 所 以 如 果 不 是 有 业务 需要 ， 可 以 先 放 一 放 。 再 加 上 后 两 个 是 
CSS3 新 属性 ， 本 书 束 不 做 进一步 介绍 了 。 














好 ， 现 在 ， 是 不 是 感觉 压力 一 下 子 小 了 很 多 ? 我 们 需要 在 意 的 可 以 
目 定义 的 属性 整 只 剩 下 下 面 这 些 : 


@font-face { 
font-family: 'example'; 
src: url(example.ttf); 
font-style: normal; 


font-weight: normal; 
unicode-range: U+6625-66FF ; 
} 








估计 有 人 会 有 疑惑 : @font-face 规则 中 的 font-style 、font- 
weight 和 unicode- range 这 些 属性 有 什么 用 ， 尤 其 是 font-style 
和 font-weight 。 实 际 上 ， 这 里 的 每 个 属性 都 不 是 泛泛 之 非 ， 都 是 有 
故事 的 。 


我 们 一 个 一 个 来 介绍 。 有 必要 预先 说 明 一 下 ， 为 了 更 清晰 地 示意 ， 
下 面 的 CSS 示 意 代码 都 刻意 做 了 简化 处 理 。 


1. font-family 





这 里 的 font-family 可 以 看 成 是 一 个 字体 变量 ， 名 称 可 以 非常 随 
意 ， 如 直接 用 一 个 美元 符号 "$” 。 例 如 : 





@font-face { 
font-family: '$'; 


src: url(example.ttf); 
} 











非 IE 浏 览 器 下 甚至 可 以 直接 使 用 纯 空格 ' " 。 不 过 有 一 点 需要 注 
意 ， 婚 是 使 用 这 些 稀奇 古怪 的 字符 或 者 空格 的 时 候 ， 一 定 要 加 引号 。 











虽然 说 自己 变量 名 可 以 很 随意 ， 但 是 有 一 类 名 称 不 能 随便 设置 ， 就 
是 原本 系统 就 有 的 字体 名 称 。 例 如 ， 如 果 使 用 下 面 的 代码 从 此 “微软 雅 
黑 ” 字 体 就 变 成 了 这 里 example.ttf 对 应 的 字体 了 。 








@font-face { 
font-family: "Microsoft Yahei ; 


src: url(example.ttf); 
} 





2. src 


src 表示 引入 的 字体 资源 可 以 是 系统 字体 ， 也 可 以 是 外 链 字 体 。 如 
果 是 使 用 系统 安装 字体 ， 则 使 用 local() 功能 符 ; 如 果 是 使 用 外 链 字 
体 ， 则 使 用 ur1() 功能 符 。 由 于 local() 功能 符 正 9 及 其 以 上 版 本 浏览 
嚣 才 文 持 ， 非 常 实 用， 而 本 书目 标 浏览 器 包含 正 8 浏览 器 ， 因 此 不 做 展 
开 ， 有 兴趣 的 读者 可 以 参考 我 的 博客 文章 : http://www.zhangxinxu.com/ 
wordpress/?p=6063 。 


因此 ， 这 里 着 章 介 绍 ur1() 功能 符 。 


目前 在 业界 ， 凡 是 使 用 自 定义 字体 的 ， 差 不 多 都 是 下 面 这 种 格式 : 


@font-face { 
font-family: ICON; 
src: Url('icon.eot') format('eot'); 
src: url('icon.eot?#iefix') format('embedded-opentype'), 
url('icon.woff2') format("woff2") 
url('icon.woff') format("woff"), 


url('icon.ttf') format("typetrue"), 
url('icon.svg#icon') format('svg'); 
font-weight: normal; 
font-style: normal; 


} 








不 知 大 家 有 没有 思考 过 : 为 什么 这 里 需要 有 两 个 src 呢 ? #iefix 
是 干什么 用 的 呢 ? format() 功能 符 有 什么 作用 ， 可 不 可 以 省 略 ? 这 
多 字体 格式 都 是 需要 的 吗 ? font-weight: normal 和 font- 
style:normal 是 不 是 多 余 的 ? 


先 解答 一 下 字体 格式 的 问题 。 上 面 这 段 CSS 代 码 一 共 出 现 了 5 种 字 
体格 式 ， 分 别 是 .eot 、.woff2、.woff 、.ttf 和 .svg。 


。 svg 格式 是 为 了 兼容 iOS 4.1 及 其 之 前 的 版 本 ， 考 虑 到 现 如 今 iOS 的 
版 本 数 已 经 翻 了 一 番 ， 上 所 以 svg 格式 的 兼容 代码 大 可 舍弃 。 

。 eot 格式 是 正 私 有 的 。 注 意 ， 目 前 所 有 版 本 的 正 浏 览 器 都 支持 eot 
格式 ， 并 不 是 只 有 正 6 一 正 8 文 持 。 只 是 ， 匡 6 一 下 8 仅 文 持 eot 这 
种 字体 格式 。 

。 woff 是 web open font format 儿 个 词 的 首 字母 简写 ， 是 专门 为 Web 开 
发 而 设计 的 字体 格式 ， 显 然 是 优先 使 用 的 字体 格式 ， 其 字体 尺寸 更 





小 ， 加 载 更 快 。Android 4.4 开 始 全 面 支 持 。 
。 woff2 是 比 woff 尺寸 更 小 的 字体 ， 小 得 非常 明显 。 因 此 ，Web 开 
发 第 一 首选 字体 惑 是 woff2 ， 只 是 此 字体 目前 仅 Chrome 和 Firefox 支 
持 得 比较 好 。 
ttf 格式 作为 系统 安装 字体 比较 多 ，Web 开 发 也 能 用 ， 就 是 尺寸 大 
了 点 儿 ， 优 点 在 于 老 版 本 Android 也 文 持 。 








综合 上 面 的 分 析 ， 我 们 可 以 得 到 如 下 的 结论 。 

(1) svg 格式 果断 舍弃 。 

(2) 如 果 无 须 兼容 IE8 浏 览 器 ，eot 格式 果断 舍弃 。 

(3) 如 果 无 须 兼容 Android 4.3 之 前 版 本 手机 ，ttf 格式 果断 含 
5 

也 就 是 说 ， 之 所 以 上 面 会 放 这 么 多 字体 格式 ， 完 全 是 因为 “兼容 
性 ”这 3 个 字 。 如 果 你 的 项 目 没 有 那么 多 兼容 顾虑 ， 大 可 精简 一 些 代 码 。 
当然 ， 如 果 站 在 用 户 的 角度 ， 字 体格 式 多 一 点 儿 也 没什么 ， 反 正 现在 都 


是 工具 生成 的 ， 多 了 几 十 个 字母 而 已 ， 又 不 会 产生 多 余 的 请 求 ， 说 不 定 
真有 用 户 使 用 古 重 手机 呢 ， 那 不 就 赚 到 了 ? 





上 面 说 的 话 很 在 理 ， 但 这 并 不 表示 上 面 的 代码 就 没有 优化 的 空间 
了 。 正 如 上 面 提 到 的 ， 应 当 优 先 使 用 woff2 ， 然 后 是 woff 格式 字体 。 
但 是 ， 如 果 我 们 仔细 看 上 和 面 的 代码 就 会 发 现 ， 在 下 浏览 器 下 ， 使 用 的 永 
远 是 eot 格式 的 字体 《因为 排 在 最 前 ) ， 而 woff 格式 字体 从 IE9 开 始 就 
支持 了 ， 浏 览 器 好 的 特性 部 没 用 上 啊 ! 但 是 ， 我 们 又 不 能 简单 地 把 woff 


格式 提前 ， 人 否则 会 影响 低 厂 本 下 浏览 器 的 字体 显示 。 怎 么 办 呢 ? 有 一 个 
小 技巧 如 下 : 


@font-face { 
font-family: ICON; 
src: url('icon.eot') format('eot'); 
src: local('®'), 
url('icon.woff2') format("woff2") 


url('icon.woff') format("woff"), 
url('icon.ttf') format("typetrue"); 





由 于 了 正 6 一 下 8 不 认识 功能 符 ， 于 是 下 面 一 个 src 被 完美 避 开 了 。 此 
时 ，IE9 浏 览 器 就 可 以 正大 光明 地 享用 woff 字体 格式 了 ! 


接 下 来 解答 #iefix 有 什么 用 的 问题 。 实 际 上 ，#iefix 是 没什么 用 
的 !“ 你 在 开玩笑 吗 ? ”没有 ， 这 里 的 #iefix 确实 没什么 用 ， 真 正 有 用 
的 其 实 是 前 面 的 问号 。 就 跟 变 魔术 一 样 ， 吸 引 我 们 眼球 的 往往 不 是 关键 
所 在 。 是 这 样 的 ，IE9 之 前 的 版 本 解析 有 一 个 严重 的 问题 ， 当 src 属性 
包含 多 个 ur1( ) 时 ， 会 把 长 长 的 字符 当 作 一 个 地 址 解析 而 返回 484 错 
误 。 因 此 把 eot 格式 放 在 第 一 位 ， 然 后 在 字体 文件 url 地 址 后 加 上 问 
号 ， 这 样 IE9 之 前 的 版 本 会 把 问号 之 后 的 内 容 当 作 url 的 参数 。 好 
吧 ，#iefix 严格 来 说 还 是 有 点 儿 用 的 ， 它 可 以 让 请 求 地 址 短 一 些 ， 因 
此 请 求 地 址 是 不 包括 锚 点 标志 # 及 其 后 面 的 内 容 的 。 如 果 按 照 这 种 说 
法 ， 那 岂 不 是 说 iefix 这 几 个 字符 多 余 ? 没 错 ， 多 余 ! 不 异 的 人 不 知道 
是 干什么 用 的 ， 懂 的 人 知道 它 是 没什么 用 的 ， 因 此 多 余 。 





下 面 轮 到 “为 什么 需要 两 个 src ”这 个 问题 了 。 如 果 是 原生 的 IE7 和 
IE8 浏 览 占 ， 第 一 个 src 实际 上 有 是 多 余 的 ， 为 什么 这 么 讲 呢 ? 之 所 以 要 





放 上 来 ， 很 大 一 部 分 原因 是 为 了 测试 工程 师 。 因 为 现在 测试 工程 师 测试 
低 版 本 的 正 浏 览 喜 辟 欢 使 用 兼容 模式 ， 兼 容 模式 的 了 正和 原生 同 版 本 的 下 
的 解析 是 有 区 别 的 ， 其 中 区 别 之 一 就 古 羔 容 模式 的 下 7 和 IE8 不 认识 问号 
(3) 解决 方案 ， 导 致 第 二 个 src 无 法 识别 ， 不 得 已 才 多 了 第 一 行 的 


ShcC 。 





font-weight:normal 和 font-style:normal 是 不 是 多 余 的 ? 我 
的 回答 是 ， 如 果 你 没有 同 字 体 名 的 多 字体 设置 ， 则 它 就 是 多 余 的 ， 至 少 
我 在 常规 项 目 中 删 挥 这 两 行 CSS 没 有 出 现任 何 异 常 。 











最 后 的 问题 是 : format() 功能 符 有 什么 作用 ， 可 不 可 以 省 略 ? 我 
的 回答 是 最 好 不 要 省 略 。format() 功能 符 的 作用 是 让 浏览 器 提前 知道 
字体 的 格式 ， 以 决定 是 否 需要 加 载 这 个 字体 ， 而 不 是 加 载 完 了 之 后 再 自 
动 判断 。 举 个 例子 ， 下 面 的 CSS 代 码 在 Chrome 浏 览 器 下 就 会 同时 加 
载 eot 和 ttf 两 种 格式 字体 : 





@font-face { 
font-family: ICON; 
src: url('icon.eot'), 


url('icon.ttf'); 





浏览 占 对 文件 格式 的 判断 不 是 基于 后 级 名 ， 下 面 这 种 写法 只 会 加 
载 ttf 这 一 种 格式 字体 ， 因 为 浏览 占 提 前 知道 了 文件 格式 是 自己 无 法 识 
别 的 : 








@font-face { 
font-family: ICON; 
src: url('icon.eot') format("embedded-opentype"), 
url('icon.ttf'); 


”| 
于 是 ， 综 合 上 面 的 全 部 知识 会 发 现 ， 业 界 和 常用 的 这 僚 东 西 ， 其 实 可 
以 优化 成 下 面 这 样 : 


@font-face { 
font-family: ICON; 
src: url('icon.eot'); 
src: local('®'), 
url('icon.woff2') format("woff2"), 


url('icon.woff') format("woff"), 
url('icon.ttf'); 





有 一 种 一 周 瘦 10 斤 的 感觉 。 
3. font-style 


在 Chrome 浏 览 器 下 ，@font face 规则 设置 font-style:italic 
可 以 让 文字 倾斜 ， 但 是 这 并 不 是 其 作用 所 在 。 


@font face 规则 中 的 font-style 和 font-weight 类 似 ， 都 是 用 
来 设置 对 应 字体 样式 或 字 重 下 该 使 用 什么 字体 。 因 为 有 些 字 体 可 能 会 有 
专门 的 斜体 字体 ， 注 意 这 个 和 斜体 字体 并 不 是 让 文字 的 形状 倾斜 ， 而 是 专 
门 设 计 的 倾斜 的 字体 ， 所 以 很 多 细节 会 跟 物理 上 的 请 求 不 一 样 。 于 是 ， 
我 在 CSS 代 码 中 使 用 font-style:italic 的 时 候 ， 就 会 调用 这 个 对 应 
字体 ， 如 下 示意 : 








@font-face { 
font-family: 'I'; 
font-style: normal; 
src: local('FZYaoti'); 

} 


@font-face { 
font-family: 'I'; 

font-style: italic; 

src: local('FZShuTi'); 


} 





由 于 专门 的 斜体 字 不 太 好 找 ， 所 以 我 使 用 “方正 姚 体 * 和 “方正 舒 
体 ” 代 蔡 做 示意 。 我 解读 一 下 上 面 的 CSS 代 码 : 制定 一 个 字体 ， 名 叫 ' 工 ' 





， 当 文字 样式 正常 的 时 候 ， 字 体 表现 使 用 “方正 姚 体 ”， 当 文字 设置 了 
font-style:italic 的 时 候 ， 字 体 表 现 为 “方正 舒 体 ”。 


好 ， 现 在 假设 有 下 面 这 样 的 CSS 和 HTML: 


.IT 
font-family: 工 ; 


<p><i class="i"> 类 名 是 i， 标 签 是 i</i></p> 
<p><span class="i"> 类 名 是 i， 标 签 是 span</span></p> 











请 问 最 终 的 表现 会 是 怎样 的 ? 


由 于 <i> 标签 天 然 有 font-style:italic ， 因 此 理论 上 ， 上 面 一 
行文 字 表 现 为 “方正 舒 体 ”， 下 面 一 行为 “方正 姚 体 ”， 最 终结 果 如 何 呢 ? 
看 ， 完 全 符合 ， 如 图 8-23 所 示 。 


莽 各 填 j， 站 从 妊 i 





类 名 是 i, 标签 是 span 


图 8-23 @font face 中 font-style 作用 示意 




















这 下 大 家 应 该 明白 @font face 规则 中 的 font-style 是 干什么 用 
的 了 吧 。 


4. font-weight 


font-weight 和 font-style 类 似 ， 只 不 过 它 定义 了 不 同 字 重 、 使 
用 不 同 字 体 。 对 中 文 而 言 ， 这 个 要 比 font-style 适用 性 强 很 多 。 我 举 
个 比较 有 代表 性 的 例子 演示 一 下 它 的 作用 : 版 权 字 体 “ 汉 仪 旗 黑 ” 字 重 非 
第 丰富 ， 但 是 这 个 字体 不 像 * 思 源 黑 体 ”， 天 然 可 以 根据 font-weight 属 
性 值 加 载 对 应 的 字体 文件 ， 那 怎么 办 呢 ? 很 简单 ， 使 用 @Qfont face 规 
则 重新 定义 一 下 即 可 。 例 如 ， 使 用 下 面 的 CSS 代 码 : 

















@font-face { 
font-family: 'QH'; 
font-weight: 466; 
src: local('HYQihei 40S'); 


@font-face { 
font-family: 'QH'; 
font-weight: 566; 


src: local('HYQihei 508S'); 
} 
@font-face { 

font-family: 'QH'; 

font-weight: 666; 

src: local('HYQihei 60S'); 
} 





解读 一 下 就 是 : 是 一 个 全 新 的 字体 ， 名 为 "QH' 。 当 字 重 font- 


weight 为 466 的 时 候 ， 使 用 “ 汉 仪 旗 黑 40S” 字 重 字 体 ; 为 5668 的 时 候 ， 
使 用 “ 汉 仪 旗 黑 50S” 字 重 字 体 ， 为 669 的 时 候 ， 使 用 “ 汉 仪 旗 黑 60S” 字 重 


字体 。 


于 是 ， 当 我 们 使 用 如 下 CSS 和 HTML 代 码 的 时 候 : 


.hy-46s， 

.hy-56s， 

.hy-66Ss { 
font-family: "QH ; 


.hy-46s { 
font-weight: 466; 
} 
.hy-56s { 
font-weight: 566; 
} 
.hy-66s { 
font-weight: 666; 
} 
<uUul> 
<1i class="hy-46s"> 汉 仪 旗 黑 46s</1i> 
<1i class="hy-56s"> 汉 仪 旗 黑 58s</1i> 
<1i class="hy-66s"> 汉 仪 旗 黑 69s</1i> 
</U]> 





就 可 以 看 到 文字 粗细 错落 有 人 致 的 效果 ， 如 图 8-24 所 示 。 
。 汉 仪 旗 黑 40s 
。 汉 仪 旗 黑 50s 
。 汉 仪 旗 黑 60s 


图 8-24 @font face 中 font-weight 作用 示意 








如 果 用 在 网 页 开发 中 ， 必 有 定 会 让 我 们 的 界面 更 加 细腻 ， 设 计 更 加 精 
致 ， 视 觉 更 加 愉 局 。 然 而 ， 此 处 的 案例 是 基于 local() 功能 符 的 ，IE8 
浏览 器 并 不 支持 ， 因 此 font -weight 原本 作用 的 使 用 场景 受到 了 一 定 
的 限制 ， 只 能 渐进 使 用 。 但 是 ， 正 如 很 多 其 他 CSS 属 性 一 样 ， 广 泛 使 用 
的 功能 往往 并 不 是 其 设计 之 初 的 功能 ， 而 是 基于 一 些 特 性 衍生 出 来 的 ， 
由 于 font-weight 支持 100 一 900 足 足 9 个 字 重 ， 而 font-style 
仅 “ 正 ?和 “和 斜 ? 两 类 ， 因 此 ，font-weight 就 被 委 以 重任 来 实现 “响应 式 








图 标 ?， 而 IE7 和 IE8 浏 览 器 都 是 支持 这 个 的 。 








所 谓 “ 啊 应 式 图 标 ?”， 指 的 是 字号 较 大 时 疗 标 字体 细节 更 丰富 ， 字 号 
较 小 时 疼 标 字 体 更 简单 的 啊 应 式 处 理 。 对 比 效 果 如 图 8-25 所 示 。 





图 8-25 “响应 式 图 标 ” 效 果 示 意 
代码 示意 如 下 : 


@font-face { 
font-family: ICON; 
src: url(icon-large.eot); 
src: local("®"), 
url(icon-large.woff); 
font-weight: 766 
} 
@font-face { 
font-family: ICON; 
src: url(icon-medium.eot); 
src: local("®"), 
url(icon-medium.woff); 
font-weight: 460; 
} 
@font-face { 
font-family: ICON; 
src: Url(icon-small.eot); 
src: local("®"), 
url(icon-small .woff); 
font-weight: 166; 
} 





此 时 ， 不 同 的 font-weight 会 加 载 不 同 的 图 标 字 体 ， 然 后 就 能 根 


据 具 体 的 场景 细 化 我 们 的 图 标 显 示 细 市 。 假 设 有 下 面 的 CSS 设 置 : 


.Icon { 
font-family: ICON; 

} 

.icon-large { 
font-weight: 766; 
font-size: 128px; 

} 

.ijcon-medium { 
font-weight: 460; 
font-size: 64px; 

} 

.ijcon-small { 
font-weight: 166; 
font-size: 16px; 


} 





则 下 面 HTML 代 码 中 的 3 个 <i> 标签 所 显示 的 效果 分 别 对 应 “弱化 细 市 的 
图 标 ”“ 细 节 较 丰富 图 标 ” 和 “细节 最 丰富 图 标 ”: 








<i class="icon icon-small">&#x1f3a4;</i> 
<i class="icon icon-medium">&#x1f3a4;</i> 


<i class="icon icon-large">&#x1f3a4;</i> 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/5-1.php 或 者 扫 右 侧 的 
二 维 码 。 





5. unicode-range 


unicode-range 的 作用 是 可 以 让 特定 的 字符 或 者 特定 范围 的 字符 
使 用 指定 的 字体 。 例 如 , “微软 雅 黑 ” 字 体 的 引号 左右 间 隐 不 均 ， 方 向 不 
明 ， 实 在 是 看 着 不 舒服 ， 此 时 我 们 就 专门 指定 这 两 个 引号 使 用 其 他 字 
体 ，CSS 代 码 如 下 : 











@font-face { 
font-family: quote; 
src: local('SimSun'); 
unicode-range: U+261c，U+261d ; 


} 
.font { 
font-family: quote, 'Microsoft Yahei'; 


} 





此 时 效果 就 会 如 图 8-26 所 示 。 


我 是 微软 雅 役 2 


我 是 人 @ 微 软 雅 肝 2 




















图 8-26 unicode-range 的 作用 效果 示意 





由 于 下 8 浏览 器 不 支持 unicode-range 属性 ， 因 此 ， 这 里 仅 简单 提 
及 ， 不 做 展开 ， 更 多 内 容 可 参考 我 写 的 博客 文 


Ee 


至 : http://www.zhangxinxu.com/wordpress/?p=6063 。 


8.5.2 @font face 与 字体 图 标 技术 


从 面 问 未 来 的 角度 讲 ， 字 体 图 标 技术 的 使 用 会 越 来 越 边 缘 化 ， 因 为 
和 SVG 图 标 技术 相 比 ， 其 唯一 的 优势 融 是 兼容 一 些 老 的 耻 浏 览 右 。 等 再 
过 几 年 ， 正 8 等 浏览 喜 彻 确 被 淘汰 了 ， 我 们 就 没有 任何 使 用 字体 图 标 技 
术 的 理由 了 。 











SVG 图 标 同 样 是 天 量 的 ， 同 样 颜色 可 控 ， 但 资源 占用 更 少 ， 加 载体 
验 更 好 ， 呈 现 效果 更 佳 ， 更 加 符合 语义 ， 我 个 人 是 非常 推 儿 SVG 图 标 
的 。 


目前 ， 对 于 很 多 桌面 端 web 项 目 ， 正 8 浏览 器 还 是 不 能 忽视 的 ， 
此 ， 字 体 图 标 技术 依然 是 非常 值得 推荐 的 技术 选 型 ， 因 为 和 传统 的 图 片 
图 标 相 比 ， 字 体 图 标的 尺寸 大 小 和 颜色 控制 非常 方便 ， 开 发 维护 方面 占 
用 流量 小 很 多 ， 收 益 是 非常 明显 的 。 











对 字体 图 标 ， 我 们 可 以 手工 使 用 一 些 软件 制作 ， 但 这 种 做 法 效率 非 
党 低下， 也 不 好 维护 ， 所 以 基本 上 现在 都 是 使 用 工具 来 完成 ， 如 使 用 
iconfont.cn 这 样 的 在 线 工具 ， 或 者 使 用 基于 Node.js 的 一 些 开 源 工具 。 





根据 我 的 使 用 经 验 ， 这 些 工 具 都 会 生成 类 似 下 面 这 样 的 CSS 代 码 : 


@font-face { 





font-family: ICON; 

src: url(icon.eot); 

src: url(icon.eot?#iefix) format('embedded-opentype'), 
url(icon.eot.woff2) format('woff2'), 
url(icon.eot.woff) format('woff'); 


} 

.Icon { 
font-family: ICON; 

} 

.ijcon-microphone:before { 
content: '\1f3a4' 


} 





这 里 出 现 两 个 需要 关注 的 东西 ， 一 个 是 字体 ， 忆 一 个 是 字符 ， 而 这 
两 个 东西 束 是 字体 图 标 技 术 的 本 质 所 在 。 


我 们 不 妨 先 来 粗略 了 解 一 下 字体 的 本 质 是 什么 。 所 谓 字 体 ， 本 质 上 
是 字符 集 和 图 形 的 一 种 映射 关系 。 这 么 解释 似乎 还 是 有 些 掏 口 ， 那 我 再 
换个 更 通俗 一 点 儿 的 比方 吧 。 一 个 字体 文件 就 好 比 一 个 巨型 商品 房 ， 里 
面 有 很 多 房间 ， 每 个 房间 都 有 一 个 唯一 的 门牌 号 ， 然 后 这 些 房间 就 专门 
用 来 挂名 男 。 








这 里 的 “门牌 号” 就 是 “字符 集 ”, “房间 里 的 名 画 ? 就 是 我 们 的 “字体 图 
形 ”。 举 个 例子 , “家 ”这 个 汉字 Unicode 编 码 是 58B6 ， 这 个 5BB6 就 是 “ 门 
牌号 ”， 在 中 文字 体 中 ， 这 个 “门牌 号 ?对 应 的 房间 里 面 的 画作 就 长 得 
是 “家 ”这 个 肉眼 所 见 的 字符 形状 。 也 就 是 说 ， 一 个 字符 编码 对 应 一 个 形 
状 。 








好 ， 现 在 如 果 我 们 通过 一 定 的 手段 ， 把 挂 5BB6 这 个 “门牌 号 ”房间 
里 面 的 画作 改 成 一 个 房屋 的 形状 ， 那 岂 不 是 使 用 这 个 字体 文件 的 时 
候 , “家 ”就 不 是 “家 ”*”， 而 是 图 8-27 所 示 的 房子 了 呢 ? 








位 


图 8-27 房子 图 形 





字体 图 标 技术 就 是 使 用 类 似 的 原理 实现 的 ， 即 把 通常 的 字符 映射 成 
为 尹 外 的 图 标 形状 ， 于 是 ， 虽 然 我 们 眼睛 看 到 的 是 个 图 标 ， 但 是 实际 上 
它 本 质 上 就 是 一 个 普通 的 字符 。 





回 到 我 们 上 面 的 示意 代码 : 


.Icon { 
font-family: ICON; 


} 

.ijcon-microphone:before { 
content: '\1f3a4' 

} 





这 里 ，1f3a4 就 是 一 个 唯一 的 “门牌 号 ”， 在 通常 的 字体 下 ， 其 字符 展示 
的 是 一 个 斜 的 麦克 风 ， 如 图 8-28 所 示 。 但 是 ， 在 ICON 这 个 字体 

中 ，1f3a4 的 图 形 被 映射 成 了 一 个 正 立 的 麦克 风 图 形 ， 最 后 的 显示 如 图 
8-29 所 示 这 般 。 


分 


Ce 











图 8-28 ”原来 的 倾斜 麦克 风 图 形 
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图 8-29 ” 自 定 义 字 体 下 正 江 的 麦克 风 图 形 








NS 


知道 了 字体 图 标 撤 术 的 原理 ， 我 们 就 能 很 好 地 理解 一 些 泻 染 现象 
TE 


(1) 因为 原始 字符 和 最 终 的 图 形 表现 相差 很 大 ， 所 以 当 我 们 的 字 
体 文件 加 载 缓慢 的 时 候 ， 可 以 明显 看 到 字符 变 图 形 的 过 程 ， 这 种 加 载体 
验 是 不 太 友 好 的 ， 字 体内 联 在 CSS 文 件 中 可 以 有 效 避 免 这 一 问题 ， 但 往 
往 字 体 文件 体积 都 比较 大 ， 这 样 处 理 得 不 傍 失 。 据 我 所 知 ， 除 此 之 外 并 
没有 非常 好 的 解决 方法 。 





(2) 原始 的 字符 x-height 和 最 终 的 图 形 x-height 往往 是 不 一 样 
的 ， 这 会 影响 内 联 元 素 的 垂直 对 齐 ， 因 此 很 容易 出 现 页 面 高 度 闪 动情 
况 ， 这 种 加 载体 验 也 是 不 友好 的 。 





(3) 原始 字符 的 ch 宽度 ， 也 就 是 水 平 占据 的 宽度 和 最 终 的 图 形 也 
古 不 一 样 的 ， 因 此 很 容易 出 现 内 联 元 素 水 平方 癌 哆 动 的 问题 ， 这 种 加 载 
体验 也 是 不 友好 的 ， 为 此 图 标 束 需 要 设 定 具 体 宽度 值 ， 例 如 : 








.Icon { 
display: inline-block; 
width: 26px; 


text-align: center; 
font-family: ICON; 
} 








当然 也 能 很 好 地 享用 字符 的 一 些 特 性 ， 如 用 font-size 改变 尺寸 ， 
用 color 改 变 颜 色 ， 用 text-shadow 增加 阴影 ， 以 及 用 writing-mode 
实现 低 版 本 下 浏览 器 下 的 旋转 效果 ， 等 等 。 





当 我 们 使 用 工具 生成 图 标 字体 的 时 候 ， 无 论 是 在 线 工 具 还 是 本 地 工 





具 ， 其 中 间 的 媒介 都 是 SVG 图 标 ， 但 是 并 不 是 所 有 的 SVG 图 标 都 是 可 以 
的 ， 根 据 我 的 经 验 ， 最 好 满足 下 面 3 点 。 








VM 


(1) 纯 路 径 ， 纯 矢量 ， 不 要 有 base64 内 联 图 形 。 


D4 


(2) 使 用 填充 而 非 描 边 ， 也 尽量 避免 使 用 一 些 高 级 的 路 径 填 充 顽 


兰 技 巧 。 


(3) 宽 高 尺寸 最 好 都 大 于 268 ， 因 为 字体 生成 的 时 候 ， 坐 标 值 会 
四 舍 五 入 ，SVG 尺 寸 过 小 会 导致 坐标 取 值 偏差 较 大 ， 使 最 终 的 图 标 不 够 
精致 。 


YL 








有 人 可 能 会 问 : 我 可 不 可 以 把 映射 字符 直接 写 在 页 面 中 ， 而 不 是 放 
在 :before 伪 元 素 中 ? 也 就 是 不 需要 下 面 的 CSS 代 码 : 








.Icon-microphone:before { 
content: '\1f3a4' 
} 


而 是 直接 用 : 


<i class="icon">&#x1f3a4;</i> 


从 技术 实现 的 角度 来 讲 这 是 完全 可 以 的 ， 而 且 不 文 持 伪 元 素 的 IE7 
等 浏览 器 都 文 持 这 样 做 。 但 是 在 实际 开发 的 时 候 ， 我 并 不 建议 这 么 做 ， 
有 两 点 原因 : 一 是 不 好 维护 ， 如 果 以 后 字符 映射 天 系 改变 ， 而 图 标 
HTML 是 散布 在 各 个 页 面 中 的 ， 那 么 我 们 的 改动 就 会 很 麻烦 ， 二 是 从 语 
义 角度 考虑 ， 图 标 字符 往往 是 不 包含 任何 意义 的 ， 应 该 没有 必要 让 搜索 














引擎 知道 ， 也 无 须 让 辅助 设备 读 取 ， 而 伪 元 素 恰 好 有 这 样 的 功能 ， 如 果 
内 联 在 HIML 中 ， 则 反而 成 了 一 种 干扰 。 


8.6 ”文本 的 控制 


CSS 有 很 多 属性 专门 用 来 对 文本 进行 控制 ， 由 于 这 些 属性 的 作用 机 
制 往 往 是 基于 内 联 盒 模型 的 ， 因 此 对 于 内 联 块 状 元 系 同 样 也 是 有 效 采 
的 ， 这 就 使 得 这 些 CSS 属 性 作用 范围 更 广 了 ， 甚 至 可 以 影响 布局 。 











8.6.1 text-indent 与 内 联 元 素 缩 进 


顾名思义 ，text-indent 就 是 对 文本 进行 缩 进 控制 ， 其 设计 之 初 
的 作用 应 该 是 实现 类 似 图 8-30 所 示 的 缩 进 效 果 。 





依 进 
AS， 在 学 识 方面 ,没有 人 能 胜 过 苟 寒食 ， 能 让 他 佩 
服 的 人 也 很 少 ， 今 夜 ， 陈 长 生 做 到 了 这 一 点 。 
育 进 ” ”他 看 着 苟 寒食 说 道 : “不 敢当 。” 
他 想起 惊 才 绝 艳 的 大 师兄 ， 想 到 这 场 婚事 ， 竟 
发 现 悄 无 声息 间 ， 自 己 对 师兄 的 信心 竟 有 些 动摇 。 


图 8-30 “” 缩 进 效果 示意 
但 是 这 种 缩 进 对 内 容 要 求 比较 高 ， 如 果 上 段落 挫 杂 有 英文、 数字 或 者 图 
片 等 内 容 ， 缩 进 反 而 可 能 会 给 人 以 参 基 不 齐 的 感觉 ， 加 上 现代 Web 形 式 
更 加 多 样 ，text-indent 在 实际 项 目 中 的 应 用 已 经 脱离 了 它 原本 的 设 
计 初 囊 。 








首先 用 得 比较 多 的 是 text-indent 负 值 隐藏 文本 内 容 。 比 方 说 ， 


很 多 网 站 的 标识 (logo) 就 是 网 站 的 名 称 ， 从 SEO 的 角度 讲 ， 我 们 大 可 
以 使 用 <h1> 和 <h2> 这 种 级 别 的 标签 放置 我 们 的 标识 ， 同 时 写 上 对 应 的 
文字 内 容 。 例 如 : 


<h1 class="1ogo">CSS 世 界 </h1> 


此 时 ， 我 们 就 可 以 使 用 text-indent 负 值 隐藏 这 里 的 文字 : 








.logo { 
width: 128px; 
background: url(logo.png); 


text-indent: -126px; 
} 








很 多 人 喜欢 设置 一 个 很 大 的 text-indent 负 值 ， 如 text- 
indent:-9999em ， 我 是 不 建议 这 么 做 的 。 首 先 ， 这 样 做 在 茶 些 设备 下 
有 潜在 的 性 能 风险 ， 体 现在 深 屏 的 时 候 会 发 生 卡 顿 ， 其 次 ， 人 

能 设备 的 屏幕 阅读 软件 ， 如 VoiceOver， 如 果 内 容 缩 进 在 屏幕 之 外 ， 
是 不 会 读 取 的 ， 这 样 就 降低 了 页 面 的 无 障碍 访问 能 








另外 ，text-indent 负 值 缩 进 在 部 分 浏览 器 下 会 影响 元 素 的 


outline 区 域 ， 通 常 需要 再 设置 overflow:hidden 。 


下 面 我 要 问 大 家 提 个 问题 : 如 果 单 看 最 终 的 CSS 样 式 效果 ， 代 码 


.logo { 
width: 128px; 


text-indent: -126px; 
} 





width: 128px; 
text-indent: -1062%; 
} 








A 


答案 是 : 不 等 同 ， 而 且 有 着 本 质 上 的 差异 。 








text-indent 的 百分比 值 是 相对 于 当前 元 素 的 “包含 块 ? 计 算 的 ， 而 
不 是 当前 元 素 。 由 于 text-indent 最 终 作 用 的 是 当前 元 素 里 的 内 联合 
子 ， 因 此 很 容易 让 人 误 以 为 text-indent 的 百分比 值 是 相对 于 当前 元 
素 宽度 计算 的 。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/6-1.php 或 者 扫 下 面 的 
二 维 码 。 结 果 text-indent: -126px 缩 进 在 盒子 之 外 ， 而 text- 
indent: -166% 早已 缩 进 到 天 涯 海 角 ， 连 影子 都 看 不 到 ， 如 图 8-31 所 
示 。 





text-indent:-420px 


cs [CC 


text -indent: -i100%; 


? [| | 


图 8-31 百分比 值 缩 进 计算 示意 





因此 ， 一 些 流传 很 广 的 text-indent 隐藏 文本 CSS 代 码 片段 其 实 是 
有 隐患 的 。 例 如 : 


.hide-text { 
text-indent: 1602% ; 
white-space: nowrap 


overflow: hidden; 


} 





在 正常 情况 下 ， 确 实 可 以 隐藏 文字 ， 而 且 无 论 是 一 行 还 是 多 行 都 可 以 非 
常 羔 容 地 隐藏 ， 因 为 一 般 情况 下 “包含 块 * 的 客 度 部 会 大 于 子 元 素 的 宽 
度 ， 所 以 我 们 是 看 不 出 问题 来 的 。 但 是 一 旦 “包含 块 ? 的 宽度 反而 小 了 ， 
那么 这 段 代 码 就 会 出 现 样 式 问题 。 我 举 个 简单 的 例子 : 








<div style="position:absolute;"> 
<p class="hide-text" style="position:absolute;"> 坚 挺 </py> 





</div> 














此 时 “坚挺 ”两 个 字 绝 对 是 纹 丝 不 动 ， 绝 对 定位 具有 包 哇 性 ， 而 子 元 素 也 
是 绝对 定位 的 ，hide-text 所 在 元 素 的 “包含 块 ”" 的 宽度 就 是 9 ， 此 时 
text-indent:166% 计算 值 也 是 6 ， 文 本 缩 进 隐 藏 彻底 失败 。 


关于 text-indent 的 百分比 值 ， 我 还 想 再 多 说 几 句 ， 那 就 是 text- 
indent 支持 百分比 值 其 实 算是 比较 “有 个 性 的 ”>， 因 为 在 CSS 世 界 中 ， 
与 文本 控制 相关 的 CSS 属 性 支持 百分比 值 的 并 不 多 ， 例 如 ，1letter- 





spacing 、word-spacing 和 text-shadow 等 都 不 支持 。 当 然 ， 随 着 
CSS 的 发 展 ， 以 后 可 能 会 支持 ， 例 如 ，word-spacing 新 草案 增加 了 百 
分 比值 并 且 已 有 浏览 器 开始 文 持 。 





那么 ，text-indent 百分比 值 还 有 没有 实际 价值 呢 ?” 从 理论 上 
讲 ， 我 们 可 以 使 用 text- indent 实现 宽度 已 知 内 联 元 素 的 居中 效果 ， 
例如 : 


.box { 

text-indent: 562%; 
} 
.box img { 


width: 256px; 
margin-left: -128px; 
} 





眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/6-2.php 或 者 扫 右 侧 的 
二 维 码 感受 一 下 居中 效果 。 








但 是 ， 由 于 text-align 属性 的 存在 ， 这 种 居中 小 技巧 平常 使 用 的 
机 会 很 少 ， 除 非 是 text-align 不 能 设置 为 center 的 场景 。 


因此 说 来 说 去 ，text-indent 百分比 值 就 是 一 个 扶 不 起 的 阿斗 ， 
还 是 固定 的 长 度 值 用 得 更 多 。 比 如 ， 在 标签 受 限 的 情况 下 实现 一 些 特殊 
的 布局 效果 ，CSS 和 HTML 代 码 如 下 : 





pi 
text-indent: -3em; 
padding-left: 3em; 


} 

<p> 提 问 ， 问题 内 容 .. .</p> 
<p> 回 答 : 回答 内 容 .. .</p> 
<p> 提 问 : 问题 内 容 .. .</p> 
<p> 回 答 : 回答 内 容 .. .</p> 














结果 , “问题 内 容 * 和 “回答 内 容 ” 都 会 自然 换行 对 齐 ， 如 图 8-32 所 


另外 ，text-indent 还 有 一 个 比较 生 俱 的 应 用 。 在 Chrome 浏 览 器 
下 ， 如 果 <img> 标签 没有 设置 src 属性 ， 则 会 出 现 一 个 灰色 的 线 框 ， 如 
图 8-33 所 示 。 


提问 : 你 是 如 何 评价 text-indent 百 分 比值 的 ? 
回答 : 我 其 实 一 并 始 旺 对 text-indent 百 分 比值 抱 
有 很 大 期 望 的 ， 知 望 可 以 有 一 些 非 常 屋 利 
的 应 用 ， 但 是 后 来 点 现 ， 要 么 有 缺陷 ， 要 
么 鸡肋 。 或 许 是 自己 掌握 的 还 不 够 吧 ! 


提问 : text-indent 有 什么 其 他 特性 吗 ? 


答 : text-indent 县 有 继承 性 ， 因此， 级 别 较 高 
的 祖先 元 素 昼 用 ; 另外 ， 其 仅 对 第 一 行内 
联 元 素 有 效果 。 











图 8-32 text-align 与 纯 文本 对 齐 布局 效果 





图 8-33 src 属性 缺失 时 候 出 现 的 边框 








H 


根据 研究 我 发 现 ， 此 灰色 边框 是 预 留 给 alt 属性 值 用 的 ， 是 内 联 水 
平 元 素 ， 因 此 可 以 使 用 text-indent 属性 隐藏 之 ， 例 如 : 





img { 
text-indent: -460pX 


overflow: hidden; 





无 src 的 <img> 本 质 上 就 是 一 个 普通 元 素 ， 因 此 ， 此 时 
overflow:hidden 也 是 有 效 的 。 


最 后 再 说 几 个 你 可 能 不 知道 的 小 知识 。 
(1) text-indent 仅 对 第 一 行内 联 盒子 内 容 有 效 。 


(2) 非 蔡 换 元 素 以 外 的 display 计算 值 为 inline 的 内 联 元 素 设 
置 text-indent 值 无 效 ， 如 果 计 算 值 是 inline-block/inline-table 
则 会 生效 。 因 此 ， 如 果 父 级 块 状元 素 设 置 了 text-indent 属性 值 ， 
子 ijnline-block/inline-table 需要 议 置 text-indent:6 重 置 。 


(3) <input> 标签 按钮 text-indent 值 无 效 。 





(4) <button> 标签 按钮 text-indent 值 有 效 ， 但 是 存在 兼容 性 
差异 ， 正 浏览 器 理解 为 单 标签 ， 百 分 比值 按照 容器 计算 ， 而 Chrome 和 
Firefox 浏 览 器 标签 内 还 有 其 他 Shadow DOM 元 素 ， 因 此 百分比 值 是 按照 
自身 的 尺寸 计算 的 。 





(5) <input> 和 <textarea> 输入 框 的 text-indent 在 低 版 本 IE 
浏览 器 下 有 兼容 问题 。 


> 友人 夺 


8.6.2 ” letter-spacing 与 字符 间距 


letter-spacing 可 以 用 来 控制 字符 之 间 的 间距 ， 这 里 说 的 “ 字 
符 ” 包 括 喘 文字 母 、 汉 字 以 及 空格 等 。 例 如 : 


.lt { 
letter-spacing: .5em; 





表现 就 会 这 样 宽松 : 
下 下 
letter-spocing 具有 以 下 一 些 特性 。 


(1) 继承 性 。 


(2) 默认 值 是 normal 而 不 是 6 。 虽 然 说 正常 情况 下 ，normal 的 
计算 值 就 是 6 ， 但 两 者 还 是 有 差别 的 ， 在 有 些 场景 下 ，1letter- 
spacing 会 调整 normal 的 计算 值 以 实现 更 好 的 版 面 布局 。 





(3) 文 持 负 值 ， 且 值 足够 大 的 时 候 ， 会 让 字符 形成 重合 ， 甚 至 肥 





向 排列 〈 非 也 浏览 器 ) 。 例 如 : 


.1t { 
letter-spacing: -2em; 


} 








此 时 在 非 正 浏览 器 下 ， 下 面 的 HTML 从 左 往 右 呈 现 出 来 的 就 不 是 “一 一 
三 四 五 *， 而 是 “五 四 三 二 一 ”: 


<p class="]lt"> 一 二 三 四 五 </p> 


至 于 正 浏 览 占 ， 最 多 只 能 完全 重合 ， 无 法 有 反问 排列 。 





为 外 ，letter-spacing 负 值 仅 能 让 字符 重 登 ， 但 是 不 能 让 蔡 换 元 
素 或 者 inline-block/ inline-table 元 素 发 生 重 有 登 。 


(4) 和 text-indent 属性 一 样 ， 无 论 值 多 大 或 多 小 ， 第 一 行 一 定 
会 保留 至 少 一 个 字符 。letter-spacing 还 有 一 个 非常 有 意思 的 特性 就 
是 ， 在 默认 的 左 对 齐 情况 下 ， 无 论 值 如 何 设置 ， 第 一 个 字符 的 位 置 一 定 
是 纹 丝 不 动 的 。 





(5) 支持 小 数值 ， 即 使 6.1px 也 是 支持 的 ， 但 并 不 总 能 看 到 效 
果 ， 这 与 屏幕 的 密度 有 关 。 对 普通 的 桌面 显示 器 ， 设 备 像素 比 是 1 ， 最 
小 泻 染 单位 是 1px ， 因 此 ， 需 要 至 少 连续 10 个 字符 ， 才 能 看 到 8.1px 产 
生 的 1px 间距 变化 ， 如 果 是 9 个 字符 ， 则 不 会 有 效果 ， 这 很 可 能 会 让 人 
误 以 为 letter-spacing 不 支持 非常 小 的 数值 ， 实 际 上 是 支持 的 。 








(6) 暂 不 文 持 百 分 比值 。 


在 实际 开发 的 时 候 ，letter-spacing 除了 控制 文字 内 容 排版 外 ， 
还 可 以 修复 一 些 布局 上 的 问题 。 例 如 ， 清 除 ijnline-block 列表 由 于 换 
行 符 或 者 空格 产生 的 空白 间 际 ， 使 我 们 的 布局 控制 更 精准 : 





.box { 
letter-spacing: -1lem; 


} 
.list { 


letter-spacing: ©@; 


} 





此 处 -1em 换 成 -169em 也 是 可 以 的 。 正 如 上 面 提 到 的 ，letter- 
spacing 的 值 再 小 也 不 会 让 inline-block 列表 发 生 重 羡 。 由 于 
letter-spacing 具有 继承 性 ， 为 了 不 影响 列表 里 面 字 符 内 容 的 排版 ， 
我 们 可 以 使 用 letter-spacing:0 进行 重 置 ， 当 然 ， 亦 可 以 使 用 默认 
值 letter-spacing:normal 重 置 。 从 理论 上 讲 ， 后 一 种 重 置 更 稳妥 一 


些 。 


由 于 letter-spacing 负 值 的 字体 重 膨 特性 ， 我 们 还 可 以 利用 该 属 
性 实现 一 些 文本 动 效 ， 核 心 CSS 代 码 如 下 : 


.title { 
animation: textIn 1s both; 
} 
@keyframes textIn { 
862% { 
letter-spacing: -268px; 


} 
166% { 
letter-spacing: 6; 
} 
} 





样 就 可 以 有 文字 依次 尺 入 的 效果 了 ， 如 图 8-34 所 示 


图 8-34 ”字符 动 效 分 步 示意 


修 忆 
VC 


注意 的 是 ， 由 于 正 浏 览 器 的 letter-spacing 负 值 不 会 有 反 上 向 
排列 效果 ， 因 此 ， 此 技术 目前 只 适合 移动 端 这 类 无 顷 关 心 正 浏览 器 的 项 
目 5 


如 果 想 杀 目 感受 效果 ， 手 动 输入 http://demo.cssworld.cn/8/6-4.php 或 
者 扫 右 侧 的 二 维 码 。 








提示 : 点 击 文字 和 内容， 动画 会 重新 泻 染 


8.6.3 word-spacinsg 与 单词 间距 


word-spacing 和 letter-spacing 名 称 
通 之 处 : 


类 似 ， 其 特性 也 有 很 多 共 


(1) 都 具有 继承 性 。 





(2) 默认 值 都 是 normal 而 不 是 6 。 通 常情 况 下 ， 两 者 表现 并 无 差 


已 
开 。o 





(3) 都 文 持 负 值 ， 都 可 以 让 字符 重 登 ， 但 是 对 于 inline-block 和 
inline-table 元 素 却 存在 兼容 性 差异 ，Chrome 浏 响 占 下 可 以 重 闭 ，IE 
和 Firefox 浏 览 器 下 则 再 大 的 负 值 也 不 会 重合 ， 因 此 不 适合 使 用 word- 
spacing 来 清除 空白 间 际 。 





(4) 都 支持 小 数值 ， 如 word-spacing:6.5px 。 


(5) 在 目前 的 CSS2.1 规 范 中 ， 并 不 支持 百分比 值 ， 但 新 的 草案 中 
新 增 了 对 百 分 值 的 文 持 ， 是 根据 相对 于 字符 的 “ 步 进 宽度 ”(advance 
width) 计算 的 。 这 属于 新 世界 内 容 ， 本 书 不 做 介绍 。 











(6) 间隔 算法 都 会 受到 text-align:justify 两 端 对 齐 的 影响 。 


当然 也 有 差异 。letter-spacing 作用 于 所 有 字符 ， 但 word- 
spacing 仅 作 用 于 空格 字符 。 注 意 ， 是 作用 在 “空格 ”上 ， 而 不 是 字面 意 
义 上 的 “单词 >。 例 如 ， 假 设 有 以 下 CSS 和 HTML: 





.wp { 
word-spacing: 26pX; 


<p class="wp"> 我 love 前 端 ! </p> 











love 虽然 是 一 个 单词 ， 但 没有 空格 ， 那 么 很 抱歉 ，word-spacing 无 
效 。 


换 句 话说 ，word-spacing 的 作用 就 是 增加 空格 的 间 际 宽度 。 有 空 
格 就 有 效 ， 可 以 是 Space 键 敲 出 来 的 空格 (U+6828 ) ， 也 可 以 是 换行 符 
产生 的 空格 (浏览 器 解析 为 U+68628 ) ， 还 可 以 是 Tab 键 敲 出 来 的 空格 
CU+6669) ， 抑 或 是 &npspj; 非 换 行 空 格 CU+66A6 ) 。 例 如 : 


<p class="wp" > 我 有 空 格 ， 我 .….</p> 








此 时 ,，“ 空 和“ 格 ”两 个 字 中 间 的 间 际 就 是 原本 的 空格 宽度 t+word- 
spacing 设置 的 28px ， 如 图 8-35 所 示 ， 但 不 包括 零 宽 空 格 CU+266B 
、U+266C 、U+266D ) 、 固 宽 空 格 〈 全 角 U+3668 、U+2663 ， 半 角 
U+2666 、U+2662 ) 以 及 罕 空 格 (U+ 2669 ) 。 


我 有 宇 格 ， 我 ea 








图 8-35 word-spacing 作用 效果 示意 





另外 ， 在 命名 上 ，word-spacing 之 所 以 称 为 word-spacing 而 不 
是 blank-spacing 之 类 的 ， 主 要 原因 是 此 属性 当初 主要 为 英文 类 排版 
设计 ， 而 英文 单词 和 单词 之 间 是 以 空格 分 隔 的 ， 要 想 控 制 单 词 之 间 的 间 
距 ， 上 自然 就 癌 “ 空 格 ?” 开 刀 了 。 














word-spacing 作用 于 空格 的 特性 可 以 让 我 们 使 用 一 些 简 单 的 方式 
进行 一 些 布局 控制 。 例 如 ， 弹 框 底部 有 时 候 是 一 个 “确认 ”按钮 ， 有 时 
候 “ 确 认 ” 和 “取消 ”按钮 同时 存在 ， 而 且 按 钮 有 时 候 居 中 对 齐 ， 有 时候 居 
右 对 齐 ， 请 问 : 如 何 设置 CSS， 让 多 按钮 的 时 候 中 间 自 动 有 合适 的 间距 
呢 ? 








如 果 按 钮 仅仅 是 大 中 对 齐 ， 我 们 可 以 写 : 


button { 
margin: 6 16px; 


} 








但 这 里 要 同时 满足 居中 对 齐 和 居 右 对 齐 ， 就 需要 采用 别 的 方法 了 。 一 种 
方法 就 是 使 用 word- spacing : 
.box { 


word-spacing: 26pX; 


} 








两 个 按钮 距离 自动 分 开 。 在 IE6 时 代 ， 这 确实 是 个 非 第 好 的 方法 ， 但 如 
今 下 面 的 做 法 可 能 要 更 合适 些 : 


button + button { 
margin-left: 26pX; 


} 





与 word-spacing 相 比 ， 这 样 做 的 优势 在 于 ， 如 果 两 个 <button> 标签 
之 间 没 有 空格 或 者 换行 ， 样 式 依然 有 效 。 





8.6.4 了 解 word-break 和 word-wrap 的 区 别 


准确 来 讲 ， 本 节 内 容 应 该 是 “了 解 word-break:break-all 和 
word-wrap:break- word 的 区 别 ”， 但 这 样 太 长 了 ， 所 以 标题 只 露出 
了 属性 值 。 


首先 了 解 一 下 word-break 属性 ， 话 法 如 下 : 





word-break: normal; 
word-break: break-all; 
word-break: keep-all; 


| | 
其 中 的 几 个 关键 字 值 的 含义 具体 解释 如 下 。 


。normal : 使 用 默认 的 换行 规则 。 

。break-all : 人 允许 任意 非 CJK (Chinese/Japanese/Korean) 文本 间 
的 单词 断 行 。 

。 keep-all : 不 允许 CJK 文 本 中 的 单词 换行 ， 只 能 在 半角 空格 或 连 
字符 处 换行 。 非 CJK 文 本 的 行为 实际 上 和 normal 一 致 。 


break-all 这 个 值 所 有 浏览 占 都 支持 ， 但 是 keep-all 就 不 这 样 
了 ， 虽 然 有 一 定 的 发 展 和 进步 ， 但 目前 移动 端 还 不 适合 使 用 word- 
break:keep-all 。 





另外 ，Chrome、Safari 以 及 其 他 WebKit 或 Blink 浏 览 器 还 支持 非 官 
方 标准 的 break-word 值 ， 其 表现 就 和 word-wrap:break-word 一 样 ， 
这 个 知识 了 解 一 下 即 可 。 


现在 轮 到 另外 一 个 主角 一 一 word-wrap 登场 了 ， 其 语法 如 下 : 


word-wrap: normal; 
word-wrap: break-word; 


其 中 的 几 个 关键 字 值 的 含义 基体 解 释 如 下 。 





。normal : 就 是 大 家 平常 见得 最 多 的 正常 的 换行 规则 。 
e。 break-word : 一 行 单词 中 实在 没有 其 他 靠 谱 的 换行 点 的 时 候 换 


/一 


介 。 








word-wrap 属性 其 实 也 是 很 有 故事 的 ， 它 之 前 由 于 和 word-break 
长 得 太 像 ， 难 免 会 让 人 记 不 住 或 摘 混 ， 于 是 在 CSS3 规 范 里 ， 这 个 属性 
的 名 称 被 修改 了 ， 叫 作 overflow-wrap 。 这 个 新 属性 名 称 显然 语义 更 
准确 ， 也 更 容易 区 别 和 记忆 。 但 是 ， 也 就 Chrome 和 Safari 等 WebKit 或 
Blink 浏 览 器 文 持 这 个 新 属性 。 因 此 ， 虽 然 换 了 个 好 看 好 用 的 新 名 字 ， 
为 了 兼容 性 ， 目 前 还 是 乖 冬 地 使 用 word-wrap 吧 。 





下 面 回 到 重点 : word-break:break-all 和 word-wrap:break- 
word。 首先 ， 两 者 长 相 神似 ， 都 有 word， 都 有 break ， 位 置 都 还 一 
样 ， 一 个 有 两 个 break ， 一 个 有 两 个 word ; 其 次 ， 两 者 的 功能 作用 也 
类 似 ， 这 两 个 声明 都 能 使 连续 英文 字符 换行 ， 那 么 它们 的 区 别 到 底 是 什 
从 ? 


那 两 者 的 区 别 是 什么 呢 ? 


用 实例 说 话 ， 手 动 输入 http://demo.cssworld.cn/8/6-5.php 或 者 扫 下 面 
的 二 维 码 。 对 比 效果 如 图 8-36 所 示 。 





word-break:break-all 


如 时 您 在 阅读 过 程 中 有 任何 疑问 或 者 发 现 表 述 不 
严谨 的 地 方 ， 欢 迎 去 官方 论坛 http://bbs.csswor 
ld.cn 进 行 反 锯 与 交流 。 


2 
word-wrap: break-word; 下 自 


如 时 您 在 阅读 过 程 中 有 任何 业 总 才 六 现下 
严 堵 的 地 方 ， 欢 迎 去 官方 论坛 
http://bbs.cssworld.cn 进 行 反馈 与 交流 。 


图 8-36 word-break:break-al1 和 word-wrap:break-word 效果 区 别 


顾名思义 ，word-break:break-all 的 作用 是 所 有 的 都 换行 ， 毫 
不 留情 ， 一 点 儿 空 隙 都 不 放 过 ， 而 word-wrap:break-word 则 带 有 人 怜 
帜 之 心 ， 如 果 这 一 行文 字 有 可 以 换行 的 点 ， 如 空格 或 CJK《〈 中 文 /日 文 / 
韩文 ) 之 类 的 ， 就 不 打 英 文 单词 或 字符 的 主意 了 ， 在 这 些 换行 点 换行 ， 
至 于 对 不 对 齐 、 好 不 好 看 则 不 关心 ， 因 此 ， 很 容易 出 现 一 片 一 片 空白 区 
域 的 情况 。 





这 就 是 这 两 个 声明 的 区 别 所 在 。 
8.6.5 White-space 与 换行 和 空格 的 控制 
1. white-space 的 处 理 模型 

white-space 属性 声明 了 如 何 处 理 元 素 内 的 空白 字符 ， 这 类 空 日 
字符 包括 Space〈 空 格 ) 键 、Enter( 回 车 ) 键 、Tab〔 制 表 符 〉 键 产生 的 


空白 。 因 此 ，white-space 可 以 决定 图 文 内 容 是 否 在 一 行 显示 〈 回 车 
空格 是 否 生效 ) ， 是 否 显示 大 段 连续 空白 〈 空 格 是 否 生效 ) 等 。 





其 属性 值 包括 下 面 这 些 。 





。normal : 合并 空白 字符 和 换行 符 。 

。 pre : 空白 字符 不 合并 ， 并 且 内 容 只 在 有 换行 符 的 地 方 换行 。 

。 nowrap : 该 值 和 normal 一 样 会 合并 空 日 字符， 但 不 允许 文本 环 
绕 。 

。 pre-wrap : 空白 字符 不 合并 ， 并 且 内 容 只 在 有 换行 符 的 地 方 换 
行 ， 同 时 允许 文本 环绕 。 

。pre-line : 合并 空白 字符 ， 但 只 在 有 换行 符 的 地 方 换行 ， 允 许 文 
本 环绕 。 














ee white-space 的 功能 分 3 个 维度 ， 分 
别 是 : 是 否 合并 空白 字符 ， 是 否 合并 换行 符 ， 以 及 文本 是 否 上 自动 换行 。 
et ey 如 表 8-2 所 示 。 














表 8-2 white-space 不 同属 性 值 功能 示意 

















如 果 合 并 空格 ， 会 让 多 个 空格 变 成 1 个 ， 也 就 是 我 们 平常 看 到 的 效 
果 ， 节 了 10 个 空格 ， 线 果 页 面 就 1 个 空格 。 如 宁 合 并 换行 ， 会 把 多 个 连 
续 换 行 合并 成 1 个 ， 并 当 作 1 个 普通 空格 处 理 ， 就 是 键盘 空格 键 训 出 来 的 
那个 空格 。 如 果 文 本 环绕 ， 一 行文 字 内 容 超 出 容器 冤 度 时 ， 会 目 动 从 下 
一 行 开始 显示 。 


有 两 个 属性 值 pre-wrap 和 pre-1line 是 从 IE8 开 始 支持 的 。 如 果 大 
家 前 端 观察 敏锐 ， 就 会 发 现 很 多 网 站 技术 文章 的 代码 块 显 示 区 域 常 常会 
出 现 一 个 长 长 的 水 平 滚动 条 ， 其 实 这 样 体验 一 点 儿 都 不 好 ， 那 为 何 还 要 
这 样 设置 呢 ? 


这 其 实 是 一 个 历史 遗留 问题 ， 以 前 做 网 站 是 需要 兼容 IE6 和 下 7 浏览 
器 的 ， 而 这 两 个 浏览 器 只 支持 white-space:pre ， 而 white- 
space:pre 的 文本 是 不 环绕 的 ， 也 束 是 说 源 代码 如 果 没 有 换行 的 话 ， 它 
会 一 行 显示 到 底 ， 不 得 已 只 能 弄 个 水 平 滚动 条 。 但 是 如 今 ， 显 然 设 


置 white-space:pre-wrap 显示 代码 片段 要 更 合适 些 。 








2. White-space 与 最 大 可 用 宽度 


当 white-space 设置 为 nowrap 的 时 候 ， 元 素 的 宽度 此 时 表现 
为 “最 大 可 用 宽度 ”， 换 行 符 和 一 些 空格 全 部 合并 ， 文 本 一 行 显示 。 








在 实际 Web 开 发 的 时 候 ，white-space 的 应 用 非常 广泛 ， 下 面 举 几 
个 例子 。 


(1) “包含 块 ” 尺 寸 过 小 处 理 。 绝 对 定位 以 及 inline-block 元 素 
都 具有 包 囊 性 ， 当 文本 内 容 宽度 超过 包含 块 宽度 的 时 候 ， 就 会 发 生 文 本 
环绕 现象 。 还 记 不 记得 之 前 遇 到 过 的 “一 柱 擎 天 ”的 例子 〈 见 图 8-37) ? 


可 以 对 其 使 用 white-space:nowrap 声明 让 其 如 预期 的 那样 一 行 显示 。 


图 8-37 ”被 “包含 块 ?限制 的 一 柱 擎 天 效果 


内 容 超 出 打点 效果 离 不 开 white-space:nowrap 声明 。 


(3) 水 平 列 表 切 换 效 果 。 水 平 列 表 切 换 是 网 页 中 常见 的 交互 效 
果 ， 如 果 列 表 的 数目 是 不 固定 的 ， 使 用 white-space:nowrap 使 列表 一 
行 显 示 会 是 个 非常 不 错 的 处 理 。CSS 示 意 代码 如 下 : 





.box { 
width: 366pX; 
position: relative; 
overflow: hidden; 

} 

.box > ul { 
position: absolute; 
white-space: nowrap; 


.box > ul > 1i { 
display: inline-block; 





使 用 white-space:nowrap 而 不 是 使 用 一 个 绝对 安全 的 固定 宽度 值 
的 好 处 在 于 没有 多 余 的 空间 浪费 ， 同 时 通过 一 行 简单 的 
box.clientWidth - box.scrollwidth 代码 就 可 以 知道 最 大 的 滚动 


贤 度 。 


关于 此 应 用 ， 我 专门 做 了 演示 页 面 ， 手 动 输入 


http://demo.cssworld.cn/ 8/6-6.php 或 者 扫 右 侧 的 二 维 码 。 





8.6.6 text-align 与 元 素 对 齐 


第 见 的 左 中 右 对 齐 没什么 好 说 的 ， 这 里 只 讲 一 下 text- 
align:justify 两 端 对 齐 。 





因为 CSS 是 母语 为 英语 的 人 发 明 的 ， 所 以 在 早期 的 时 候 ， 对 中 文 或 
其 他 东亚 语言 并 没有 考虑 得 那么 细致 ， 从 text-align:justify 的 表现 
上 就 可 以 突 见 一 斑 。 例 如 ， 正 浏览 器 《至 少 到 IE11) 到 目前 为 止 使 
用 text-align:justify 都 无 法 让 中 文 两 端 对 齐 ， 而 Chrome、Firefox 
和 Safari 等 浏览 器 都 是 可 以 的 。 





就 最 终 的 演 染 表现 来 看 ，Chrome 等 浏览 器 应 该 对 文本 内 容 进行 了 
算法 区 分 ， 对 CJK 文 本 使 用 了 letter-spacing 间隔 算法 ， 而 对 非 CJK 
文本 使 用 的 是 word-spacing 间隔 算法 ， 但 正 浏览 器 则 就 一 个 word- 
spacing 间隔 算法 。 于 是 就 会 出 现 明 明 左 右 padding 大 小 设置 一 样 ， 结 
果 右 侧 空白 明显 更 大 的 尴 熔 问题 。 例 如 : 








.COntent { 
padding: 16px 28px; 
} 





可 能 最 后 的 效 末 如 图 8-38 所 示 。 


这 是 一 段 临 时 想 出 来 的 文案 ， 其 中 可 能 合 
杂 了 几 个 英文 间 词 ， 例 如 CSS， 例如 JS 


一 一 


寺 。 


图 8-38 左右 padding 设置 大 小 一 致 实际 留 白 不 一 致 示意 





不 过 ， 好 在 下 有 一 个 私有 的 CSS 属 性 text-justify (目前 也 写 入 
规范 草案 了 ) 可 以 实现 中 文 两 端 对 齐 的 。 于 是 ， 通 过 使 用 下 面 的 CSS 代 
人 码 组 合 就 可 以 实现 全 部 浏览 器 都 羔 容 的 中 文 两 端 对 齐 效 果 : 





.justify { 
text-align: justify; 


text-justify: inter-ideograph; 


} 











其 中 ， 属 性 值 jnter-ideograph 的 字面 意思 是 “国际 象形 文字 ”， 非 官 
方 非 标准 ， 可 以 放心 使 用 ， 不 用 担心 以 后 其 他 浏览 器 也 支持 之 后 出 现 新 
旧 泻 染 不 一 致 的 问题 。 


眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/6-7.php 或 者 扫 下 面 的 
二 维 码 。 实 例 页 面 对 比 效果 如 图 8-39 所 示 。 





这 是 一 段 临 时 想 出 来 的 文案 ， 其 中 可 能 参 
杂 了 几 个 英文 单词 ， 例 如 CS3， 例 如 办 


等 


™ 


两 端 对 齐 


这 是 一 段 临时 想 出 来 的 文案 ， 其 中 可 能 参 
杂 了 几 个 英文 单词 ， 例 如 CSS， 例 如 JS 


等 





图 8-39 ”下 浏览 器 的 中 文 两 端 对 齐 效果 


text-align:justify 除了 实现 文本 的 两 端 对 齐 ， 还 可 以 实现 容错 
性 更 强 的 两 端 对 齐 布局 效果 。 


我 们 先 从 简单 的 一 行 排 列 说 起 。 例 如 ， 要 实现 如 图 8-40 所 示 的 效 
果 。 


HTML 结 构 如 下 : 





<ul class="justify"> 
<1i> 
<img src="1.jpg"> 


<p> 图 标 描述 1</py> 
</1i> 
<1i> 


<img src="1.jpg"> 
<p> 图 标 描述 2</p> 
</1i> 
</ul> 





我 们 可 以 让 <1i> 列表 inline-block 化 ， 然 后 text- 
align:justify 一 步 到 位 即 可 实现 两 端 对 齐 效果 了 ! 例如 : 
.justify { 
text-align: justify; 


.justify 1i { 


display: inline-block; 
text-align: center; 


} 





但 结果 却 不 是 想象 的 那样 ， 而 是 依旧 左 侧 排 列 ， 如 图 8-41 所 示 。 为 什么 


会 这 样 呢 ? 


图 标 手 述 2 


图 8-40 ”简单 的 单行 两 端 对 齐 布 局 效果 





图 标 摘 述 1 图 标 搞 述 2 


图 8-41 设置 text-align:justify 依然 左 对 齐 








那 是 因为 不 足 一 行 。 在 默认 设置 下，text-align:justify 要 想 有 
两 端 对 齐 的 效果 ， 需 要 满足 两 点 : 一 是 有 分 隔 点 ， 如 空格 ; 二 是 要 超过 
一 行 ， 此 时 非 最 后 一 行内 容 会 两 端 对 齐 。 


上 面 的 例子 满足 了 第 一 点 ，<1i> 标签 中 间 有 换行 符 ， 在 默认 
white- space 属性 下 会 转换 成 普通 空格 但 是 并 不 满足 第 二 点 ， 内 容 
并 没有 超过 一 行 。 这 就 难 办 了 ， 我 们 的 内 容 是 固定 的 ， 不 可 能 再 加 一 个 
列表 ， 就 没有 什么 好 方法 了 吗 ? 


GE last 属性 ， 可 以 规定 最 后 一 行内 
联 内 容 的 排列 方式 ， 这 是 从 下 浏览 器 过 来 的 。 例 如 : 


.justify { 
text-align-last: justify; 


} 











相当 于 把 第 二 后 要 求 直 接 给 否决 了 ， 就 是 “最 后 一 行 的 对 齐 束 是 两 尊 对 
齐 ”! 


好 一 个 及 时 雨 ! 然而 可 惜 ，Safari 浏 览 器 ， 包 括 Safari 10， 都 不 文 
持 ， 以 至 于 移动 端 和 吕 面 端 都 不 能 使 用 ， 其 是 踪 憾 。 


于 是 ， 我 们 只 能 寻求 更 加 极 客 一 点 的 搁 术 手段 ， 比 方 说 ， 借 助 伪 元 
素 目 动 补 一 行 。 例 如 ; 





.justify { 
text-align: Justify 


.justify:after { 


content: ""; 
display: inline-table;  /* 也 可 以 是 inline-block */ 
width: 1662%; 

} 








这 相当 于 强制 创建 一 个 “看 不 见 ” 的 元 素 ， 满 足 换行 这 个 要 求 ， 实 现 第 一 
行 的 两 端 对 齐 效果 。 从 效果 上 看 ， 确 实 两 端 对 齐 了 ， 然 而 ， 列 表 下 方 似 
乎 莫名 多 了 一 些 高 度 ， 如 图 8-42 所 示 。 





图 标 摘 述 1 图 标 描述 2 


图 8-42 ”两 端 对 齐 ， 但 底部 有 英名 高 度 











关于 这 个 英名 高 度 如 何 产 生 可 以 参见 4.3 节 ， 其 中 也 提供 了 修正 手 
段 ， 分 为 两 点 : 一 是 容器 设置 font- size:8， 列 表 font-size 再 还 
原 ; 二 是 辅助 两 端 对 齐 的 内 联 元 素 设 置 vertical-align:top 
或 vertical-align:bottom 。 例 如 : 





.justify { 
text-align: justify; 
font-size: 0; 

} 

.justify:after { 
content: ""; 
display: inline-table; 
width: 1662%; 
vertical-align: bottom; 

} 

.justify 1i { 
display: inline-block; 
font-size: 14px; 


} 


[L 


理论 很 完美 ， 现 实 很 残酷。 在 下 浏览 器 下 ， 如 果 font-size 设 为 8 
， 其 样式 表现 就 好 像 空 格 根本 不 存在 一 样 ， 无 法 两 端 对 齐 。 是 不 是 再 次 
失望 了 ? 后 来 ， 我 经 过 党 试 发 现 ， 我 们 可 以 设置 font-size:.1px ， 设 
置 字号 0.1 像 素 ， 正 浏览 器 又 认为 空格 存在 了 ， 同 时 间 隐 什么 的 都 没有 
了 ， 美 哉 ! 然而 ，Chrome 浏 览 器 加 面 浏览 器 有 一 个 最 小 12px 的 font- 
size 限制 ， 设 置 字号 0.1 像 素 等 同 于 设置 字号 12px ， 此 时 Chrome 浏 览 
器 间 隐 问题 又 出 现 了 ! 是 不 是 彻底 绝望 了 ? 














于 是 ， 我 不 得 已 使 用 了 下 面 这 种 比较 极 客 的 方法 进行 处 理 : 


.justify { 
text-align: justify; 
font-size: .1px; 


font-size: -Webkit-calc(opx + Opx); 








于 是 ， 上 皆大欢喜。 上面 的 font-size 处 理 就 是 莫名 高 度 修复 的 关键 技巧 


关于 上 面 的 两 端 对 齐 案 例 ， 可 以 手动 输入 http:/demo.cssworld.cn/8/ 
6-8.php 或 者 扫 右 侧 的 二 维 码 进行 体验 。 





另外 多 说 一 句 ， 如 果 1Line-height 设置 的 是 固定 值 ， 如 1ine- 
height: 26px ， 则 容器 需要 同步 设置 1ine-height:6 或 者 改 为 相对 
计算 的 值 。 





下 面 有 另外 一 个 问题 ， 就 是 我 们 的 列表 排版 不 可 能 总 是 只 有 1 行 ， 
也 不 可 能 只 有 2 列 ， 如 果 还 是 使 用 上 面 的 伪 元 素 填充 法 ， 可 能 就 会 出 现 
图 8-43 所 示 的 布局 。 





图 8-43 ”最 后 一 行 尴 俯 地 两 端 对 齐 





这 显然 不 是 我 们 想 要 的 效果 ， 我 们 是 希望 最 后 一 个 列表 跟 在 后 面 ， 
而 不 是 跑 到 最 右边 。 过 到 这 种 情况 ， 我 们 可 以 使 用 辅助 列表 占 位 来 实现 
想 要 的 效果 ，HTML 代 码 如 下 : 


<ul class="justify"> 
<li><img src="1.jpg"><p> 
<1Li><img src="2.Jjpg"><p> 摘 述 2</p></1Liy> 
<1Li><img src="3.Jjpg"><p> 摘 述 3</p></1Liy> 
<1i><img src="4.jpg"><p> 描 述 4</p></1i> 
<li><img src="5.jpg"><p> 描 述 5</p></1i> 
<1i class="placeholder"></1i> 
<1i class="placeholder"></1i> 
<1i class="placeholder"></1i> 

</ul> 


是 
] 





述 1</p></1i> 








站 
] 











-由 
| 






































最 后 3 个 类 名 为 placeholder 的 <1i> 标签 就 是 布局 辅助 元 素 。 假 设 我 
们 列表 宽度 是 128px ， 则 如 下 设置 即 可 : 
.placeholder { 


display: inline-block; 
width: 128px; 


vertical-align: bottom; 


} 





其 作用 和 使 用 伪 元 素 创建 一 个 宽度 16e8% 的 内 联 块 级 元 素 是 一 样 的 ， 也 
同样 会 存在 有 额外 高 度 问 题 ， 处 理 方法 一 模 一 样 ， 不 再 痪 述 。 最 后 补充 
几 点 。 


(1) 关于 占 位 标签 的 个 数 。 占 位 标签 的 个 数 和 列表 的 列 数 保持 一 
样 就 可 以 了 ，166% 实现 符合 预期 的 布局 效果 ， 多 了 浪费 ， 少 了 不 行 。 








(2) 关于 使 用 空 标 签 心理 障碍 。 有 人 对 代码 有 洁癖， 原本 规整 的 
列表 最 后 加 几 个 空 标签 ， 心 里 难受 。 这 种 心理 往往 出 现在 新 人 映 上 ， 本 





质 上 是 因为 关注 点 是 代码 自身 ， 而 不 是 产品 、 同 事 或 公司 更 高 层面 的 东 
西 。 于 是 ， 当 产品 经 理 提 需求 时 ， 他 们 想到 的 是 我 的 代码 如 何如 何 ， 而 
不 是 产品 收益 如 何如 何 。 毕 竟 我 们 是 职场 人 ， 很 显然 ， 创 造 收 益 和 价值 
的 意识 要 远 比 代码 洁 间 心 理 对 职业 生涯 发 展 帮助 更 大 。 回 到 我 们 这 里 
代码 排版 确实 不 美 了 ， 但 是 功能 很 好 地 实现 了 ， 且 非常 健壮 ， 容 错 性 
强 ， 而 且 对 SEO 没有 任何 干扰， 对 辅助 设备 访问 也 没有 任何 干扰， 百 益 
无 一 害 ， 有 什么 好 难受 的 呢 ! 








8.6.7 ”如 何 解 决 text-decoration 下 划 线 和 文本 重 闭 的 问题 


CSS 的 text-decoration:underline 可 以 给 内 联 文 本 增加 下 划 
线 ， 但 是 ， 如 果 对 细节 要 求 较 局 ， 就 会 发 现 ， 下 划 线 经 单 会 和 中 文 文字 
的 下 边缘 粘连 在 一 起 〈 如 图 8-44 所 示 ) ， 英 文 的 话 甚至 直接 穿 过 ， 越 看 
越 有 心痛 的 感觉 





图 38-44 中 几 个 中 文字 下 边缘 正好 都 是 横 线 ， 结 果 可 以 看 到 ， 文 字 下 
边缘 和 下 划 线 基本 上 合 在 一 起 ， 分 不 清 谁 是 谁 了 ， 换 成 微软 雅 黑 字 体 则 
似乎 变本加厉 了 ， 如 图 8-45 所 示 。 

金玉 全 王 
图 8-44 ”下 划 线 和 文字 合 在 一 起 


金玉 全 王 





图 8-45 采用 微软 雅 黑 字体 时 文字 和 下 划 线 重 侍 





有 没有 什么 办 法 让 下 划 线 不 要 靠 得 这 么 近 ， 或 者 文字 可 以 完整 、 清 
晰 地 显示 昵 ?有 。 方 法 很 多 ， 例 如 ， 浏 览 器 文 持 并 不 好 的 text- 


decoration-skip 属性 、CSS3 box-shadow a 
模拟 ， 甚 至 可 以 走 canvas 和 SVG 滤 镜 。 然 而 ， 这 些 看 上 去 很 厉害 的 技巧 
其 实 华而不实 。 转 一 圈 后 你 会 发 现 ， 最 好 的 处 理 方法 就 是 使 用 看 似 普 通 

却 功勋 日 越 的 border 属性 。 例 如 : 

af 


text-decoration: none 
border-bottom: 1px solid; 


} 





效果 如 图 8-46 所 示 。 


有 人 可 能 会 担心 : 这 里 增加 了 下 边框 ， 会 不 会 增加 高 度 、 影 响 水 平 
对 齐 呢 ? 完全 不 用 担心 ， 对 于 纯 内 联 元 素 ， 垂 直方 向 的 padding 属性 和 
border 属性 对 原来 的 布局 定位 等 没有 任何 影响 。 也 就 是 说 ， 就 算 
border-bottom 宽度 设 为 169px ， 上 下 行文 字 的 垂直 位 置 依旧 纹 丝 不 
动 。 再 加 上 border 兼容 性 很 好 ， 天 然 使 用 color 颜色 作为 边框 色 ， 可 
请 下 划 线 重印 问题 解决 办 法 的 不 二 之 选 。 男 外 ， 配 合 padding ， 我 们 就 
可 以 很 有 效 地 调节 下 边框 和 文字 下 边缘 的 距离 ， 实 现 我 们 最 想 要 的 效 
果 。 使 用 类 似 下 面 的 CSS 代 码 : 











alt 
text-decoration: none; 
border-bottom: 1px solid; 


padding-bottom: 5S5px; 





效果 如 图 8-47 所 示 。 


我 是 一 段 义 字 ， 链 接地 址 出 现下 划 线 。 


图 8-46 ”下 边框 模拟 的 下 划 线 
我 是 一 段 义 字 ， 链 接地 址 出 现下 划 线 。 
图 8-47 padding border 配合 的 下 划 线 效果 


另外 ， 使 用 porder-bottonm 模拟 下 划 线 的 时 候 ，border-color 
最 好 省 略 ， 这 样 就 会 使 用 文字 的 color 颜色 作为 边框 色 ， 鼠 标 hover 的 
时 候 ， 下 划 线 会 自动 和 文字 一 起 变色 ， 效 果 如 图 8-48 所 示 。 


使 用 border-bottom 模拟 的 另外 一 个 好 处 就 是 ， 我 们 还 可 以 使 用 
虚线 或 者 点 线 下 划 线 ， 如 图 8-49 所 示 。 


我 是 一 段 文字 ， 链 接地 址 出 现下 划 线 。 


图 8-48 ”border 模拟 下 划 线 ，hover 颜色 跟着 变化 效果 





图 8-49 border 模拟 下 划 线 使 用 点 线 下 划 线 效果 


text-decoration 除了 文 持 下 划 线 underline ， 还 支持 上 划 线 
overline 和 中 划 线 line-through 。 其 中 ， 上 划 线 我 没有 在 实际 项 目 
中 有 使 用 过 ， 但 是 中 划 线 却 比较 常见 ， 用 来 表示 “删除 ”"，<del> 标签 默 
认 的 text-decoration 的 属性 值 就 是 1ine-through ， 因 此 类 似 原价 
删除 效果 ， 如 图 8-50 所 示 。 直 接 价格 外 面 套 一 个 <del> 标签 即 可 ， 既 样 
式 天 然 ， 又 易于 兼容 ， 没 有 任何 理由 使 用 <span> 、<em> 之 类 标签 ， 然 
后 再 额外 设置 text-decoration: line-through 。 





¥179 
图 8-50 ”原价 删除 效果 


text-decoration 还 支持 同时 设置 多 个 属性 。 例 如 ， 上 划 线 和 下 
划 线 同时 出 现 : 


al 


text-decoration: underline overline; 


} 





text-decoration 是 CSS 世界 中 为 数 不 多 文 持 多 属性 值 的 属性 ， 
然而 在 实际 开发 中 人 鲜 有 出 场 的 机 会 ， 尤 其 如 今 设计 风格 局 平 色 块 ， 下 划 
线 出 场 的 机 会 也 越 来 越 少 了 。 


在 CSS3 新 世界 中 ，text-decoration 还 可 以 是 波浪 下 划 线 ， 也 可 
以 指定 下 划 线 颜色 等 ， 但 也 不 知道 等 到 了 浏览 器 全 兼容 的 时 代 ，text- 
decoration 还 有 没有 出 场 的 机 会 。 


总 之 ， 感 觉 text-decoration 是 个 越 往 后 越 翡 苦 的 角色 。 





8.6.8 ”一 本 万 利 的 text-transform 字符 大 小 写 


text-transform 也 是 为 英文 字符 设计 的 ， 要 么 全 大 写 text- 
transform:uppercase ， 要 人 么 全 小 写 text-transform:1Iowercase ， 


似乎 没什么 值得 挖掘 的 ， 但 有 一 些 场景 使 用 它 却 会 有 一 本 万 利 的 效果 。 
1. 场景 一 : 身份 证 输入 
我 国 的 号 份 证 最 后 一 位 有 可 能 是 字母 X， 且 各 种 场合 都 是 指定 必须 


大 写 。 如 果 我 们 给 输入 喘 份 证 的 <input> 输入 框 设 置 : 


input { 
text-transform: uppercase; 


} 


那么 就 算 我 们 敲 进去 的 是 小 写 x， 出 现 的 也 是 大 写 的 X 模 样 ， 岂 不 其 
好 ! 





2. 场景 二 : 验证 人 码 输 入 





图 8-51 给 出 的 是 某 网 站 的 验证 码 。 这 个 验证 码 实 际 上 是 不 区 分 大 小 
写 的 ， 然 而 ， 当 用 户 在 输入 框 输入 小 写 内 容 的 时 候 ， 内 心 实际 上 是 悄悄 
不 安 的 : 会 不 会 区 分 大 小 写 啊 ? 以 至 于 写 验证 码 的 时 候 同 时 按 下 Shift 键 
以 保证 输入 的 字符 与 样 例 一 模 一 样 ， 我 按 了 Shift 键 好 多 年 才 发 现 不 用 区 
分 大 小 写 。 设 想 一 下 ， 如 果 这 里 有 下 面 这 样 的 设置 : 





Imf3 上 上 区 F3 


图 8-51 ”验证 码 和 验证 码 输入 效果 








input { 
text-transform: uppercase; 


} 
用 户 悄 悄 不 安 的 小 心思 根本 惑 不 会 出 现 ， 因 为 用 户 输入 小 写字 母 的 时 
候 ， 输 入 框 里 面 出 现 的 束 是 和 验证 码 一 样 的 大 写 内 容 。 


亲自 感受 一 下 吧 ， 手 动 输入 http://demo.cssworld.cn/8/6-9.php 或 者 扫 
右 侧 的 三 维 码 。 





8.7 了解:first-letter/:first-line 伪 元 尼 





8.7.1 深入 :first-letter 伪 元 素 及 其 实例 


很 多 年 前 ，Chrome 浏 览 器 和 IE9 浏 览 占 还 未 出 现 ， 那 时 候 firstt- 
letter 叫 伪 类 选择 嚣 ， 写 法 是 前 面 加 一 个 冒号 ， 如 :first-letter 。 
那 时 候 的 语义 要 更 直 白 一 些 ， 选 择 第 一 个 字符 ， 然 后 设置 一 些 样 式 。 后 
来 ， 伪 类 和 伪 元 素 被 划分 得 更 加 明确 和 规范 了 ，::after 、: :before 
、::backdrop、::first-letter、::first-line、::selection 
等 是 伪 元 素 ，:active 、:focus 、:checked 等 被 称 为 伪 类 ， 这 就 导 
致 : :first-letter 的 语义 发 生 了 一 些 变 化 一 一 首 字 符 作为 元 素 的 假想 
子 元 兹 。 


“假想 子 元 系 ”， 听 上 去 有 些 故 弄 饼 虚 的 感觉 ， 实 际 并 不 是 ， 以 这 种 
更 加 直上 日 通俗 的 方式 解析 才 更 容易 理解 下 面 的 很 多 现象 。 





1. : :first-letter 伪 元 素 生 效 的 前 提 


要 想 让 : :first-letter(:first-letter) 伪 元 素 生 效 ， 是 需要 满 
足 一 定 条 件 的 ， 而 且 条 件 年 一 看 还 挺 森 刻 。 


首先 ， 元 素 的 display 计算 值 必须 是 block 、inline-block 
、1ist-item 、table- cell 或 者 table-caption ， 其 他 所 


有 display 计算 值 都 没有 用 ， 包 括 display:table 和 display :flex 
第 
于 o 


此 外 ， 不 是 所 有 的 字符 都 能 单独 作为 ::first-letter 伪 元 系 存 在 
的 。 什 么 意思 呢 ? 我 们 看 一 个 简单 的 例 于 ， CSS 和 HTML 代 码 如 下 : 


p:first-letter { color: silver; } 





按照 我 们 的 认 知 ， 第 一 个 问号 应 该 是 银色 的 ， 但 实际 上 ， 全 部 都 是 
默认 的 黑色 ， 效 果 如 图 8-52 所 示 。 

















图 8-52 ”问号 全 部 默认 黑色 





为 什么 呢 ? 这 是 因为 常见 的 标点 符号 、 各 类 括号 和 引号 
在 ::first-letter 伪 元 素 眼 中 全 部 都 是 “辅助 类 ”字符 ， 有 点 儿 买 东西 
送 赠品 的 感觉 ， 但 是 赠品 本 身 却 不 能 购买 ， 这 里 的 问号 “? ”就 属于 赠 
品 。 有 些 不 理解 ? 看 一 个 例子 就 知道 了 。 假 如 我 们 在 上 面 的 HTML 中 一 
堆 问 号 后 面 写 上 一 些 内 容 字 符 ， 比 方 说 中 文 “辅助 * 二 字 ， 结 果 效 果 如 图 
8-53 所 示 。 








助 


























图 8-53 ”全 部 问号 和 “ 辅 " 字 变 成 银色 








色 ， 要 变 就 一 大 波 一 起 变 。 原 因 很 简单 , “辅助 ”二 字 才 是 : :first- 
letter 伪 元 系 真正 要 收入 夺 中 作为 “ 伪 元 素 ” 的 字符 ， 但 是 现在 前 面 出 
现 了 一 堆 它 不 感 兴趣 的 问号 ， 怎 么 办 呢 ? 那 就 当 作 赠品 一 并 收 了 ， 于 
是 ， 一 大 波 字符 全 都 成 银色 了。 如果 全 是 问号 ， 因 为 没有 主 商品 ， 自 然 
也 就 无 法 获得 赠品 ， 所 以 : :first-letter 没有 选择 任何 字符 ， 问 号 全 
部 默认 是 黑色 。 








有 人 可 能 会 有 疑问 ， 那 到 底 哪些 字符 属于 “赠品 "， 哪 些 属于 “ 商 
中" 呢 ? 我 特意 做 了 测试 ， 总 结 下 来 就 是 ，“ 赠 品 字符 ”包括 .@#%8*() 
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正常 情况 下 可 以 直接 作为 伪 元 素 的 字符 束 是 数字 、 英 文字 母 、 中 
文 、$ 、 一 些 运 算 符 ， 以 及 非常 容易 被 忽视 的 空格 等 。 这 里 的 “空格 ”有 
必要 再 加 粗 强 调 一 下 ， 因 为 它 的 确 是 很 容易 被 忽视 的 一 个 字符 。 

最 后 说 明 一 点 ， 字 符 前 面 不 能 有 图 片 或 者 ijnline-block/inline- 
table 之 类 的 元 素 存 在 。 例 如 ， 下 面 的 HTML 和 CSS 代 码 : 


p:first-letter { color: silver; } 


<p><i style="display:inline-block"></i> 银 色 </p> 





结果 “银色 ”两 字 的 颜色 还 是 黑色 ， 如 图 8-54 所 示 。 这 就 是 因为 多 了 一 
个 display 值 是 ijnline-block 尺寸 为 6 的 <i> 元 素 ， 导 致 ::first- 
letter 伪 元 素 直 接 不 起 作用 了 。 





一 般 来 讲 ，: :before 伪 元 素 和 普通 元 素 之 间 没 有 多 少 瓜 葛 ， 例 

如 :first-child 和 :empty 之 类 的 选择 器 都 不 受 影响 ， 但 是 ， 由 
于 ::first-letter 和 ::before 一 样 也 是 伪 元 素 ,“ 暗 生 情 恢 * 也 是 难 
免 的 。 翻 译 成 CSS 世 界 的 术语 就 是 : : :before 伪 元 素 也 参与 : :first- 
letter 伪 元 系 。 例 如 ， 如 下 CSS 和 HTML 代 码 : 
p:before { 

content: “新 闻 : '; 
RE f 


color: silver; 


} 





<p> 这 是 新 闻 的 标题 





结果 “新 ” 变 成 了 银色 ， 如 图 8-55 所 示 。 包 括 正 8 在 内 的 浏览 器 都 是 这 样 的 
表现 。 
银色 
图 8-54 inline-block 元 素 让 :first-letter 无 效 
辕 : 这 是 新 闻 的 标题 ….… 


图 8-55 :before 伪 元 素 的 首 字 符 变 成 银色 效果 





2.::first-letter 伪 元 素 可 以 生效 的 CSS 属 性 


如 果 字 符 被 选 作 了 : :first-letter 伪 元 素 ， 并 不 是 像 : :before 
伪 元 素 那样 ， 几 乎 所 有 CSS 都 有 效 ， 只 是 一 部 分 有 效 。 


。 所 有 字体 相关 属性 : font 、font-style 、font-variant 
、 font-weight 、font-size 、line-height 和 font-family 。 


所 有 背景 相关 属性 : background-color 、background-image 

、background- position 、background-repeat 

、background-size 和 background-attachment 。 

。 所 有 margin 相关 属性 : margin 、margin-top、margin-right 

、margin-bottom 和 margin-1left 。 

所 有 padding 相关 属性 : padding 、padding-top 、padding- 

right 、padding- bottom 和 padding-1left 。 

。 所 有 border 相关 属性 : 缩写 的 border 、border-style 
、border-color 、border-width 和 普通 书写 的 属性 。 

。 color 属性 。 


。 text-decoration 、text-transform、J1letter-spacing 
、word-spacing (合适 情境 下 ) 、line-height 、float 和 
vertical-align (只 有 当 float 为 none 的 时 候 ) 等 属性 。 


因此 ， 如 果 亡 图 使 用 visibility:hidden 或 者 display:none 隐 
藏 : :first- letter 伪 元 素 ， 还 是 省 省 吧 。 
3. : :first-letter 伪 元 素 的 一 些 有 意思 的 特点 
(1) 文 持 部 分 display 属性 值 标签 敬 套 。 : :first-letter 伪 元 
素 获 取 可 以 路 标签 ， 也 就 是 不 仅 能 选择 匿名 内 联 盒 子 ， 还 能 透 过 层 层 标 
签 进行 选择 ， 但 是 也 有 一 些 限 制 ， 并 不 是 所 有 标签 仍 套 都 是 有 用 的 。 
display 值 如 果 是 inline 、block 、table 、table-row 


、table-caption 、table- cell 、1ist-item 都 是 可 以 的 ， 但 是 不 
能 是 ijnline-block 和 :inline- table ， 人 否则 : :first-letter 伪 元 素 


会 直接 无 效 ， 而 display:flex 则 改变 了 规则 ， 直 接 选 择 了 下 一 行 的 字 
符 内 容 。 

眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/8/7-1.php 或 者 扫 右 侧 的 
二 维 码 。 





例如 : 


p:first-letter { 
color: silver; 

} 

p > span { 
display: table; 




















<p><span> 第 一 个 </span> 字 符 看 看 会 不 会 变 














结果 如 图 8-56 所 示 , “第 ” 字 变 成 银色 了 (为 了 打印 对 比 明显 ， 没 有 使 用 
演示 页 面 的 红色 ) 。 


请 选择 display 的 属性 值 : |table "| 


图 8-56 “第 ” 变 成 银色 验证 了 table 类 型 嵌 套 有 效 








这 种 般 套 关系 支持 多 层 藤 套 ， 即 连续 套 4 一 5 层 inl1ine 水 平 的 标签 
和 没有 任何 标签 内 套 的 效果 是 一 样 的 。 





(2) 颜色 等 权重 总 是 多 了 一 层 。 这 是 非常 容易 犯 的 一 个 错误 ， 也 
是 CSS 世 界 十 大 不 易 理 解 问题 之 一 。 例 如 ， 下 面 这 个 问题 是 某 同行 发 邮 
件 问 我 的 ， 我 简单 编辑 了 一 下 : 





p:first-letter { 
color: red; 
} 
p > span { 
color: blue!important; 

















<p><span> 第 一 个 </span> 字 符 看 看 会 不 会 变 红 ? </py> 











请 问 “ 第 ”这 个 字符 的 颜色 是 什么 ? 


基本 上 ， 超 过 95% 的 前 端 人 员 会 认为 是 blue ， 因 为 大 家 都 是 从 CSS 
选择 器 权重 的 角度 去 考虑 的 。 这 个 答案 本 里 没 问题 ,但 是 却 忽略 了 很 重 
要 的 一 点 ，: :first-letter 伪 元 素 其 实 是 作为 子 元 又 存在 的 ， 或 者 说 
应 当 看 出 是 子 元 素 ， 于 是 就 很 好 理解 了 。 对 于 类 似 color 这 样 的 继承 属 
性 ， 子 元 素 的 CSS 设 置 一 定 比 父 元 素 的 级 别 要 高 ， 哪 介 父 级 使 用 了 重量 
级 的 !important ， 因 为 子 元 素 会 先 继 承 ， 然 后 再 应 用 上 自身 设置 。 
此 ， 上 面 CSS 和 HTML 代 码 的 最 终结 果 是 ， 第 一 个 字符 “第 ” 字 的 颜色 是 
red， 红色 ! 














这 就 是 : :first-letter 伪 元 素 的 另外 一 个 重要 特性 一 一 颜色 等 权 
重 总 是 多 了 一 层 。 





4.: :first-letter 实际 应 用 举例 


电 疝 产品 经 常会 有 价格 ， 价 格 前 面 一 般 都 有 一 个 ¥ 符号 ， 这 个 符号 
字体 往往 会 比较 特殊 ， 字 号 也 比较 大 ， 同 时 和 文字 的 数值 有 几 像 素 的 距 
离 。 要 实现 这 样 的 效果 ， 通 常 的 做 法 是 在 ¥ 符号 外 面包 一 个 span 标 
签 ， 命 名 一 个 类 名 ， 然 后 通过 CSS 控 制 。 实 际 上 ， 还 有 更 简单 巧妙 的 方 
法 ， 就 是 使 用 本 文 介绍 的 : :first-letter 伪 元 素 。 





CSS 示 例 代 码 如 下 : 


.price:first-letter { 
margin-right: 5px; 
font-size: xx-large; 


vertical-align: -2px; 


} 





于 是 ， 我 们 的 HIML 就 可 以 很 简洁 : 


<p>¥399</p> 


¥ 并 不 是 “赠品 字符 ”因此 这 里 可 行 ， 最 后 效果 如 图 8-57 所 示 。 
4 399 


图 8-57 ¥ 在 使 用 : :first-letter 控制 后 的 效果 








8.7.2 ”故事 相对 较 少 的 :first-line 伪 元 素 

:first-line 和 :first-letter 像 是 对 表 兄 弟 ， 所 谓 “ 不 是 一 家 人 
不 进 一 家 门 ”， 它 们 长 得 类 似 ， 很 多 特性 也 类 似 。 但 是 相 比 之 
下 ，:first-line 的 故事 要 少 一 些 ， 没 有 “赠品 字符 ”之 类 的 本 存在。 





。 :first-line 和 :first-letter 伪 元 素 一 样 ，IE9 及 以 上 版 本 浏览 








器 文 持 双 冒号 : :first-line{} 写法 ，IE8 浏 览 器 只 认识 单 冒 号 写 
去: 

:first-line 和 :first-letter 伪 元 素 一 样 ， 只 能 作用 在 块 级 元 
素 上 ， 也 就 是 display 为 block 、inline-block 、1ist-item 
、table-cell 或 者 table- caption 的 元 素 设 置 :first-line 才 
有 效 ，table 、flex 之 类 都 是 无 效 的 。 

:first-line 和 :first-letter 伪 元 素 一 样 ， 仪 支持 部 分 CSS 属 
性 ， 例 如 : 

所 有 字体 相关 属性 ; 

o color 属性 ; 

所 有 背景 相关 属性 ; 


o 上 text-decoration 、text-transfor、letter-spacing 


O 


O 〇 


、word-spacing 、line-height 和 vertical-align 等 属 
性 。 
:first-line 和 :first-letter 伪 元 素 一 样 ，color 等 继承 属性 
的 权重 总 是 多 了 一 层 ， 毕 竟 称 为 “ 伪 元 素 "， 就 好 像 里 面 还 有 个 子 元 
素 。 如 果 :first-line 和 :first- letter 同时 设置 颜 
色 ，:first-letter 级 别 比 :first-line 高 ， 即 使 :first- 
line 写 在 后 面 ， 甚 至 加 !important (如 果 浏 览 器 支持 ) 也 是 如 
i: 
:first-line 和 :first-letter 伪 元 素 一 样 ， 也 支持 标签 骸 套 ， 
但 是 具体 细则 和 :first-letter 出 入 较 大 ， 例 如 ， 它 不 支持 table 
相关 属性 等 。 








具体 大 家 可 以 亲自 感受 一 下 ， 手 动 输入 http://demo.cssworld.cn/8/7- 
2.php 或 者 扫 右 侧 的 二 维 码 。 





例如 : 


p:first-letter { 
color: silver; 
} 
p > span { 
display: inline-block; 








<p><span> 第 一 行 </span> 字 符 看 看 会 不 会 变 


























结果 在 Chrome 浏 览 右 下 颜色 居然 断 开 了 ， 如 图 8-58 所 示 。 


请 选择 display 的 属性 值 : inline-block "| 


A = 


二 1J 





图 8-58” Chrome 浏览 器 下 inline-block 阻 断 :first-1Line 


IE 和 Firefox 都 没有 这 个 问题 ， 文 字 颜 色 都 是 一 样 的 。 因 此 ， 如 果 想 
使 用 :first-line ， 首 行内 容 不 能 混入 inline-block/inline-table 


pr 
: :first-line 实际 应 用 举例 


下 面 残 举 一 个 我 在 某 干 万 级 访问 项 目 中 使 用 : :first-1line 的 例子 
吧 。 大 致 是 这 样 的 : 我 希望 网 站 小 标签 、 线 框 按 钮 和 实 色 按钮 全 部 都 可 
以 使 用 color 颜色 控制 ， 例 如 : 





<a _ href class="btn-normal red" role="button"> 红 色 按 钮 </a> 
<a href class="btn-normal blue" role="button"> 蓝 色 按 钮 </ay> 


<a href class="btn-normal green"” role="button"> 绿 色 按 钮 </a> 





其 中 ，.red 、.blue 、.green 是 站 点 通用 的 颜色 类 名 。 结 果 我 就 遇 到 
了 难题 ， 当 我 们 使 用 如 下 CSS 代 码 的 时 候 ， 实 色 背 景 按钮 就 会 遇 到 文字 
颜色 和 背景 颜色 一 样 的 问题 : 


.btn-normal { 
background-color: currentColor; 


} 





因为 变量 currentColor 就 是 当前 color 的 色 值 。 怎 么 办 呢 ? 考虑 到 按 
钮 上 的 文字 都 是 白色 ， 因 此 我 们 可 以 这 样 处 理 : 


.btn-normal: :first-line { 
color: #fff; 


} 





因为 利用 了 ::first-line 伪 元 素 ， 于 是 .btn-normal 标签 上 的 颜 
色 实 际 上 是 设置 给 background-color 的 ， 而 按钮 真正 呈现 的 颜色 已 经 
被 : :first-line 伪 元 素 牢 牢 设置 好 了 ， 束 完全 不 用 担心 文字 颜色 篆 


景色 混在 一 起 了 。 


大 功 告 成 ! 此 时 ， 如 果 要 新 增 一 个 黑色 按钮 ， 直 接 用 下 面 的 HTML 
代码 就 可 以 了 ， 无 须 额 外 再 去 写 按钮 相关 的 CSS 代 码 : 





<a href class="btn-normal black" role="button"> 绿 色 按 钮 </a> 








第 9 草 ” 元 素 的 装饰 与 类 化 


前 面 几 音 介 绍 了 与 CSS 世 界 布局 相关 的 内 容 ， 如 果 用 建筑 打 比 方 ， 
就 是 毛坯 房 已 经 建 好 了 ， 理 论 上 可 以 入 住 了 ， 但 实际 上 ， 我 们 或 多 或 少 
都 会 对 房间 进行 一 定 的 装修 ， 这 个 “装修 ?反映 在 CSS 世 界 中 就 是 “元 系 的 
装饰 和 美化 ”， 如 设置 合适 的 颜色 或 者 增加 合适 的 底 纹 等 。 





9.1 CSS 世 界 的 color 很 单调 


9.1.1 少 得 可 怜 的 颜色 关键 字 


这 里 的 “颜色 关键 字 ” 指 的 是 诸如 red 、blue 这 些 关 键 字 。 





CSS1 的 时 候 只 支持 16 个 基本 颜色 关键 字 ， 如 black 、white 。 为 
什么 数量 这 么 少 呢 ? 我 们 可 以 想 想 当时 的 显示 器 水 平 ， 不 是 黑白 的 已 经 
不 错 了 。 


CSS2 的 时 候 ， 显 然 应 该 要 新 增 一些 颜 色 关 键 字 。 或 许 很 多 人 满怀 
希望 ， 总 以 为 会 有 什么 尺 喜 ， 结 打 打 然 很 恢 喜 : 居然 只 加 入 了 一 个 颜色 
构 色 orange 。 











到 了 CSS3 的 时 候 ， 以 为 又 会 是 “ 雷 声 大 ， 雨 点 小 ”， 结 果 这 次 却 出 人 
意料 ， 一 下 子 增加 了 100 多 个 颜色 关键 字 ， 甚 至 连 mediumturquoise 这 
样 的 复杂 得 看 不 懂 也 记 不 住 的 关键 字 都 出 现 了 。 这 些 扩 展 的 CSS 颜 色 关 
键 字 是 有 专门 的 名 称 的 ， 称 为 “X11 颜色 名 ”， 这 里 的 “X11” 不 是 11 区 的 








蕊 思 ， 而 是 指 用 来 显示 位 图 的 X Window System， 常 见于 类 UNIX 计 算 机 
系统 上 。 


到 了 CSS4 的 时 候 ， 以 为 又 会 有 什么 怀 人 之 举 ， 结 果 又 仅 增加 了 一 
个 颜色 关键 字 一 -rebeccapurple 。 


在 本 书 中 ，CSS 世 界 指 CSS 2.1，CSS 新 世界 指 CSS3，CSS 新 新 世界 
指 CSS4， 因 此 ，CSS 世 界 中 支持 的 颜色 关键 字 其 实 少 得 可 怜 ， 总 共 就 17 
个 ， 如 图 9-1 所 示 。 其 中 ，gray 和 grey 表示 的 是 同一 个 颜色 值 。 如 果 
想 了 解 更 多 CSS3 颜 色 关 键 字 ， 可 以 阅读 这 篇 文章 : http://www. 
zhangxinxu.com/wordpress/?p=4859 。 








所 有 CSS3 新 增 的 颜色 关键 字 原生 下 8 浏览 器 都 是 不 支持 的 。 注 意 ， 
这 里 特意 加 了 “原生 ”二 字 。 我 们 总 是 使 用 下 兼容 模式 去 测试 低 版 本 正 浏 
览 器 ， 但 不 总 是 准确 的 ， 其 中 之 一 就 是 颜色 。 如 果 你 用 高 版 本 下 浏览 器 
的 IE8 模 式 去 浏览 ， 会 发 现 CSS3 的 颜色 值 都 是 可 以 准确 泻 染 的 ， 但 实际 
上 ， 原 生 正 8 都 不 认识 ， 而 使 用 正 8 的 用 户 几 乎 全 部 都 是 原生 下 8， 因 此 
要 慎 用 。 不 过 ， 考 虑 到 实际 开发 的 时 候 设 计 师 不 可 能 就 使 用 这 些 关键 字 
对 应 的 颜色 ， 因 此 ， 我 们 没 多 少 机 会 使 用 颜色 关键 字 ， 也 自然 很 难 有 机 
会 踩 到 这 个 坑 。 








关 建 字 RGB hex 秆 ”实时 表现 
black #DD6066 
silver #CBcece 


gray [] | #3888880 


white #ffffff 
maroon #8608600 
red #ff0000 


purple #800680 
fuchsia | #ff0@06ff 


Bk 
I 


CSS Leve 
green #098069 
lime #00ff00 
olive #888686 
yellow #ffff00 
navy #8066880 
blue #0000ff 
teal #068806808 
aqUa #00ffff 
CSS Level 2 (Revision 1) orange #ffa500 


图 9-1 CSS 世 界 支 持 的 颜色 关键 字 











事情 还 没有 结束 ， 接 下 来 ， 关 于 颜色 名 称 ， 还 有 一 个 很 有 意思 但 很 
多 人 都 不 知道 的 特性 表现 ， 那 就 是 : 如果 浏 览 费 无 法 识别 颜色 关键 字 ， 
那么 HTML 中 对 颜色 关键 字 的 解析 和 CSS 中 的 会 不 一 样 。 


这 里 有 必要 好 好 解释 一 下 。 大 家 应 该 都 知道 ， 传 统 HTML 的 部 分 属 
性 可 以 直接 支持 color 属性 ， 例 如 : 


<font color="pink"> 少 女 色 </font> 


同时 ， 我 们 也 可 以 通过 style 属性 书写 color 声明 。 例 如 : 


<font style="color:pink;"> 少 女 色 </font> 


如 末 浏 览 器 认识 这 些 颜色 关键 字 ， 则 该 什么 颜色 就 显示 什么 颜色 ; 
但 是 ， 如 果 浏 览 占 无 法 识别 这 些 颜 色 关 键 字 ， 则 两 种 书写 的 最 终 表现 会 
有 差异 。 





在 HIML 中 ， 会 使 用 其 他 算法 将 非 识别 颜色 关键 字 转 换 成 另外 一 个 
完全 不 同 的 颜色 值 ， 而 在 CSS 中 则 是 直接 使 用 默认 颜色 值 。 


例如 ， 我 们 使 用 CSS4 水 平 的 颜色 关键 字 rebeccapurple 做 测试 ， 
HTML 代 码 如 下 : 


<h1 style="color:rebeccapurple;">CSS 色 和 <font color="rebeccapurple">HTML 色 
</font> 


解析 差异 测试 </h1> 





IE9 浏 览 器 下 的 结果 如 图 9-2 所 示 。 


CSS 色 和 HTMIL 色 解析 差异 测试 


图 9-2 IE9 浏 览 器 下 “HTML 色 ”显示 为 绿色 
IE11 浏 览 喜 下 的 结果 则 如 图 9-3 所 示 。 


CSS 色 和 HTML 色 解析 差异 测试 


图 9-3 ”IE11 浏 览 器 下 所 有 文字 都 是 偏 紫 色 的 





9.1.2 不 支持 的 transparent 关键 字 


transparent 关键 字 是 一 个 很 有 意思 的 关键 字 ，background- 
color:transparent 包括 IE6 浏 览 器 都 支持 ，border- 
color:transparent 从 IE7 浏 览 器 开始 支持 ， 但 是 color: 


transparent 却 从 IE9 浏 览 器 才 开 始 支持 。 


我 确定 color :transparent 原生 IE8 浏 览 器 不 支持 ， 会 使 用 默认 颜 
色 代 蔡 。 不 要 拿 兼 容 模式 下 的 测试 结果 说 事 儿 ， 那 是 不 准 的 。 高 版 本 正 
浏览 器 下 的 下 8 兼容 模式 color: transparent 确实 可 以 让 文字 透明 ， 
但 是 下 8 用 户 都 是 使 用 原生 IE8 的 。 


9.1.3 不 支持 的 currentColor 变量 





currentColor 变量 是 个 好 东西 ， 可 以 使 用 当前 color 计算 值 ， 即 
所 谓 颜 色 值 。 但 是 同样 地 ，IE9+ 浏 览 器 才 支 持 它 。 


实际 上 ，CSS 中 很 多 属性 值 默认 就 是 currentColor 的 表现 ， 我 们 
一 般 ( 除 了 部 分 浏览 器 animation 需要 ) 无 须 画 蛇 添 足 地 再 声明 这 个 关 
键 字 。 如 border 、text-shadow 、box-shadow 等 ， 尤 其 border ， 包 
括 IE7 在 内 的 浏览 器 都 是 如 此 特性 。 因 为 我 们 使 用 图 形 生成 的 时 候 ， 尽 
量 使 用 border 属性 ， 所 以 hover 变 色 只 需要 控制 color 值 就 可 以 了 。 例 
如 : 








.test { 
color: red; 


border: 2px solid; 


} 





没有 必要 这 么 使 用 : 


.test { 
color: red; 


border: 2px solid currentColor; 


} 





9.1.4 不 支持 的 rgba 颜色 和 hsla 颜色 


CSS 志 界 的 color 属性 支持 十 六 进 制 颜色 、rgb 颜色 。 十 六 进 制 颜 
色 指 的 是 长 得 像 #@688666 或 #866 这 样 的 颜色 ， 我 们 在 CSS 中 用 得 最 频 
繁 的 就 是 这 种 格式 的 颜色 。 为 什么 昵 ? 因为 字符 数目 最 少 ， 书 写 更 快 ， 
泻 染 性 能 更 高 。 


rgb 颜色 实际 上 和 十 六 进 制 颜色 是 近亲 ， 都 归属 于 rgb 颜色 ， 只 是 
进 制 有 差异 。rgb 格式 从 我 入 行 起 浏览 器 就 支持 了 ， 除 了 文 持 数值 颜 
色 ， es 8，51) ， 还 支持 百分比 rgb 颜色 ， 如 rgb(166%， 
6%，26%) ， 这 个 很 多 人 应 该 是 不 知道 的 。 





rgb 数值 格式 只 能 是 整数 ， 不 能 是 小 数 ， 否 则 ， 包 括 各 正 以 及 
Chrome 在 内 的 浏览 器 都 会 无 视 它 。 下 面 是 一 些 文 持 和 不 支持 rgb 数值 格 
式 的 示例 : 





/* 下 面 这 些 都 是 同一 个 RGB 颜色 : */ 
#f03 

#F63 

#ff0033 

#FF6633 

rgb(255,0,51) 














rgb(255, 6, 51) 

rgb(255，6，51.2) /* 无 效 ! 整数 ， 不 能 小 数 */ 
rgb(166%,6%,26%) 

rgb(166%，6%，26%) 

rgb(166%，6，26%) /* 无 效 ! 整数 和 百分比 不 能 在 一 起 使 用 */ 











但 color 属性 并 不 支持 hsl 颜色 、rgba 颜色 和 hs1a 颜色 。 


hsl 颜色 是 CSS3 才 出 现 的 颜色 表现 格式 ，IE9+ 浏 览 器 才 支 持 。 
ws 





义 。 其 中 ，h 表示 hue， 是 色调 的 意思 ， 取 值 8 一 366 ， 大 致 按照 数值 
红 、 检 、 黄 、 绿 、 青 、 览 、 紫 变化 节奏 ; s 表示 saturation 〈 饱 和 度 ) ， 
用 0 一 100% 表 示 ， 值 越 大 饱和 度 越 高， 颜色 越 完 ， 通 第 我 们 评价 某 设 
计 “ 亮 瞎 我 们 的 眼 ?， 就 是 “这 个 设计 颜色 饱和 度 太 高 ”的 另 一 种 说 法 ; 1 
表示 lightness (亮度 ) ， 也 用 86 一 166% 表示 ， 值 越 高 颜色 越 亮 ，100% 就 
是 白色 ，509%6 则 是 正常 亮度 ，09% 就 是 黑色 。 








在 取 色 器 中 ，hsl 颜色 非常 管用 ， 有 助 于 迅速 选取 我 们 想 要 的 颜色 


值 ， 或 者 根据 现 有 颜色 得 到 近似 色 。 比 方 说 ， 我 们 要 实现 一 个 hover 效 
果 ，hover 一 个 色 块 ， 然 后 颜色 加 深 ， 怎 么 实现 呢 ? 使 用 rgb 很 不 方便 ， 


而 使 用 hsl 则 很 简单 ， 我 们 只 要 把 1( 也 就 是 亮度 ) 稍微 调 低 一 点 儿 就 
可 以 了 。 





最 后 ，CSS3 中 的 颜色 支持 Alpha 透 明 通 道 ， 于 是 就 有 了 rgba 颜色 和 
hsla 颜色 ，a 表示 透明 度 ， 取 值 在 6 一 1 ，8 表示 完全 透明 ，1 表示 实 色 
无 透明 。 如 果 使 用 小 数 ， 前 面 的 9 可 以 省 略 ， 能 节约 一 个 字符 大 小 。 


rgba(255,0,0,.7) 


hs1a(246,168%,56%， .7) 





更 深入 、 更 有 趣 的 知识 这 里 就 不 展开 了 。 
9.1.5 ” 文 持 却 鸡 肋 的 系统 颜色 
“系统 颜色 ? 指 的 是 什么 呢 ? 


我 们 都 知道 ，Windows 操 作 系统 的 不 同 主题 的 弹 框 、 工 具 栏 之 类 的 
颜色 都 是 不 一 样 的 ， 这 些 不 一 样 的 颜色 就 称 为 系统 颜色 。 在 Web 中 ， 我 


们 也 可 以 使 用 这 些 颜 色 ， 我 们 可 以 实现 和 系统 主题 风格 类 似 的 Web 组 件 
皮肤 效果 。 


么 ， 都 有 哪些 系统 颜色 关键 字 呢 ? 





下 面 是 我 做 的 一 些 整理 。 注 意 ， 这 些 是 跟着 系统 走 的 ， 不 是 所 有 的 
系统 都 文 持 ， 而 且 有 些 值 是 跟着 浏 贤 絮 走 的 ， 在 Chrome 浏 览 占 下 可 能 
是 淡 灰 色 ， 而 在 下 下 可 能 是 日 色 等 ， 如 图 9-4 所 示 〈 图 截 自 Chrome) 。 

















如 此 上 世纪 风格 的 色 值 表现 和 当下 设计 风格 格格 不 入 ， 加 上 色 值 跟 
者 系统 走 ， 最 终 表现 不 可 控 ， 使 得 在 实际 项 目 中 几乎 没有 任何 使 用 系统 
颜色 的 理由 ， 给 人 感觉 比较 鸡肋 。 




















ActiveBorder 
激活 态 窗 体 边框 。 


ActiveCaption 
激活 态 窗 体 标题 。 应 
该 使 用 CaptionText 前 景 
色 。 


AppWorkspace 
多 区 档 界 面 痛 景色 。 


Background 
桌面 背景 。 


ButtonFace 

三 维 元 素 的 表面 背景 
色 ， 之 所 以 会 呈现 3D 效 
果 ， 是 由 于 周围 有 一 层 
边框 。 应 该 使 用 Button 
Text 的 前 景色 。 


ButtonHighlight 

3D 元 素面 对 光源 的 边框 
色 ， 之 所 以 会 呈现 3D 效 
果 ， 是 由 于 周围 有 一 层 
边框 。 


ButtonShadow 

3D 元 素 痛 对 光源 的 边框 
色 ， 之 所 以 会 呈现 3D 效 
果 ， 是 由 于 周围 有 一 层 
边框 


ButtonText 
按 毛 交 本 。 需要 使 用 


ButtonFace 或 ThreeDFace | 


背景 色 。 


CaptionText 

标题 文本 ， 尺寸 意 子 ， 
以 及 滚动 条 简 头 意 子 。 
需要 使 用 ActiveCaption 
背景 色 。 

Bess 


| EE | 菜单 中 的 文本 。 应 使 
| GrayText | 用 Menu 背 景色 。 
| 忒 色 的 (disabled) 文 | 
本 。 | 
| es | Scrollbar 
| | 滚动 条 大 色 区 域 。 
| Highlight | 
| 控件 中 被 选中 的 项 。 “| 
| 应 使 用 HighlightText 前 | ThreeDDarkShadow 
| 景色。 | 远离 3D 元 素 光源 的 两 个 


| 边框 中 比较 暗 通常 为 
| 外 面 》 的 那个 颜色 。 








| HighlightText | 
控件 中 被 选中 的 项 的 文 | 人 
| 本 。 应 使 用 Highlight [ee 
| 有 景色 。 | 3D 元 素 的 表面 背景 
| | | 色 。 应 使 用 ButtonText 
| | 前 景色 。 
| InactiveBorder | 
非 激活 态 窗 体 边框 。 | 于 昌 
ThreeDHighiight 
| 面 对 3D 元 素 光 源 两 个 边 
| InactiveCaption E 高 《通常 为 外 面 ) 的 
| | 非 激活 态 窗 体 标题 。 ”| 那 一 个 。 
| 应 使 用 InactiveCaption | 
| Text 前 景色 。 | 
| | | ThreeDLightSshadow 
| | 面 对 3D 元 素 光源 的 两 个 


| InactiveCaptionText | | 边框 中 比较 暗 “通常 为 
非 激活 标题 的 文本 颜色 。 里 面 ) 和 








| 应 使 用 InactiveCaption | 
| 背景 色 。 | 
| 0 | ThreeDShadow 
| | 远离 3D 元 素 光源 的 两 个 
| InfoBackground | 边框 中 比较 高 (通常 为 
| 提示 框 控 件 背景 色 。 ”| 里 面 ) 的 那个 颜色 。 
| 应 使 用 InfoText 前 景 SE 
| ' Window 
| | 窗 体 背景 。 应 使 用 
| InfoText | WindowText 前 景色 。 
| 提示 框 控 件 文本 色 。 
应 使 用 InfoBackground | 
| 月 景色 。 ' WindowFrame 
Menu | 
| 菜单 背景 。 应 使 用 | WindowText 
| MenuText 前 景色 。 | 窗 体 中 的 文本 。 应 使 
| 用 Window 背 景色 。 
MenuText [| 





图 9-4 ”系统 颜色 关键 字 值 和 示意 











系统 颜色 虽然 又 冷门 又 不 好 看 ， 但 其 实 也 是 可 以 在 实际 项 目 中 有 所 
应 用 的 。 举 两 个 我 自己 实践 的 案例 : 一 是 在 编辑 器 中 模拟 块 状 内 容 《〈 非 
图 片 、 非 文字 ) 被 选中 效果 ， 为 了 和 原生 选中 的 效果 一 样 ， 使 用 了 系统 
颜色 ， 以 假 乱 真 ， 看 不 出 是 模拟 的 ; 二 是 集成 了 众多 模块 的 工具 页 面 需 
要 有 一 个 即时 取 色 配色 功能 ， 主 要 是 给 设计 师 用 的 。 显 然 ， 传 统 的 
skin1.css、skin2.css 预 先 全 部 写 好 再 切换 的 方式 是 不 行 的 ， 因 为 模块 是 
分 散 且 独立 的 ， 色 值 是 不 确定 的 ， 也 不 能 说 入 库 走 变量 或 者 运行 Node.js 
工具 什么 的 ， 开 发 和 维护 成 本 都 很 高 ， 因 此 最 好 纯 Web 前 端 解决 。 可 以 
采用 使 用 系统 色 作 为 模块 的 CSS 色 值 的 方式 实现 。 其 好 处 在 于 以 下 两 
i 








(1) 系统 颜色 本 身 有 颜色 ， 我 们 的 模块 是 可 以 即时 预览 的 ， 双 击 
html 模块 文件 就 可 以 ， 没 有 任何 其 他 依赖 。 


(2) 系统 颜色 名 称 都 比较 高 冷 ， 非 党 适合 作为 变量 ， 丛 换 时 不 会 
发生 仲 兴 ; 


于 是 ， 当 我 们 选取 某 一 颜色 后 ， 只 要 把 所 有 CSS 中 的 系统 颜色 变量 
丛 换 成 选中 的 色 值 ， 任 意 组 装 的 模块 的 即时 配色 的 效果 就 实现 了 。 


9.2 CSS 世 界 的 background 很 单调 


CSS 世 界 中 的 background 大 部 分 有 意思 的 内 容 都 是 在 CSS3 新 世界 
中 才 出 现 的 ， 如 Multiple backgrounds 〈 多 背景 ) 、background- 


已 上 忆 . = 


size (背景 尺寸 ) 、background-origin (背景 初始 定位 盒子 ) 、 


background-clip《〈 和 背景 剪 切 盒子 ) 等 。 





相 比 之 下 ，CSS 世 界 支持 的 background 那 点 东西 就 显得 比较 单调 
了 ， 毕 竟 那 个 时 代 以 图 文 展示 为 主 ， 装 饰 和 美化 并 不 是 重点 。 





当 我 们 使 用 background 属性 的 时 候 ， 实 际 上 使 用 的 是 一 系 
列 background 相关 属性 的 集合 ， 包 括 : 


e。 background-image: none 

e background-position: 6 为 6% 

e。 background-repeat: repeat 

e background-attachment: scroll 


。 background-color: transparent 
如 果 是 IE9+ 浏 览 器 ， 则 还 包括 : 


e。 background-size: auto auto 
e。 background-origin: padding-box 


e background-clip: border-box 


本 书 仅 介绍 浏览 器 都 支持 的 上 面 5 个 background 相关 属性 ， 虽 然 
相 比 之 下 有 些 单调 ， 但 一 些小 故事 还 是 有 的 。 


9.2.1 ”隐藏 元 素 的 background-image 到 底 加 不 加 载 


隐藏 元 素 的 background-image 到 底 加 不 加 载 呢 ?想必 这 是 一 个 很 
多 人 都 感 兴趣 的 问题 。 


根据 我 的 测试 ， 一 个 元 素 如 果 display 计算 值 为 none ， 在 正 浏览 
强 下 (IE8~~IE11， 更 高 版 本 不 确定 ) 依然 会 发 送 图 片 请 求 ，Firefox 浏 
览 器 不 会 ， 人 至 于 Chrome 和 Safari 浏 览 器 则 似乎 更 加 智能 一 点 : 如 果 隐 茂 
元 素 同时 又 设置 了 background-image ， 则 图 片 依 然 会 去 加 载 ， 如 果 是 
父 元 素 的 display 计算 值 为 none ， 则 背景 图 不 会 请 求 ， 此 时 浏览 器 或 
许 放 心地 认为 这 个 背景 图 暂时 是 不 会 使 用 的 。 


IE8 浏 览 器 支持 base64 图 片 ， 包 括 在 background-image 属性 中 使 
用 ， 可 以 节约 一 个 网 络 请 求 。 但 是 ，base64 图 片 的 泻 染 性 能 并 不 高 ， 只 
适合 尺寸 比较 小 的 图 片 ， 大 尺寸 图 片 慎 用 。 





如 有 果 想 用 background-image 实现 鼠标 光标 经 过 变换 图 厂 的 效果 
(例如 ， 灰 色 的 关闭 图 片 鼠标 光标 经 过 变 成 深 色 ) ， 则 务必 将 这 两 张 图 
片 合并 在 一 张 图 片上 ， 除 了 减少 请 求 外 ， 这 样 做 更 重要 的 好 处 是 交互 体 
验 更 好 了 。 如 果 图 片 不 合 在 一 起 ， 当 鼠标 光标 经 过 的 时 候 ， 就 会 去 请 求 
另外 一 张 图 片 的 地 址 ， 如 果 这 个 图 片 没 有 被 缓存 ， 则 请 求 发 出 去 到 图 片 
显示 是 有 一 段 时 间 的 ， 很 容易 出 现 鼠 标 光标 经 过 关闭 图 片 ， 结 果 图 片 消 
失 的 情况 ， 实 际 上 图 片 不 是 消失 了 ， 而 是 还 在 请 求 的 路 上 。 











9.2.2 与 众 不 同 的 background-position 百分比 计算 方式 
CSS 中 有 一 类 属性 值 被 称 作 <position> 值 ， 表 示 一 种 CSS 数 据 类 
型 、 二 维 坐标 空间 ， 用 于 设置 相对 盒子 的 坐标 。 


<position> 值 文 持 1 一 4 个 值 ， 可 以 是 具体 数值 ， 也 可 以 是 百分比 
值 ， 还 可 以 是 left 、top 、right 、center 和 bottom 等 关键 字 。 图 
9-5 给 出 了 经 典 的 示意 。 


left center wht 


100px 


top 75px left 100px 或 


left 100px top 妮 SB 奖 





75px 


cent eer... : SN right 
或 right center 
或 center left 100% 
25% 或 top 50% left 100% 
wet. Ss a 
bottom left 25% 或 
top 100% 25% 或 
100% 55 
































图 9-5 <position> 值 经 典 示 意 


如 有 果 缺 省 偏 移 关 键 字 ， 则 会 认为 是 center ， 因 此 background- 
position:top center 可 以 直接 写成 background-position:top 。 





IE8 浏 览 需 最 多 只 文 持 同 时 出 现 2 个 值 ， 从 下 9 开始 文 持 同时 出 现 3 个 
值 或 4 个 值 ， 作 用 是 指定 定位 的 侦 移 计算 从 哪个 方位 算 起 。 例 如 : 


background-position: right 46px bottom 26pXj 


表示 距离 右边 缘 40 像 素 ， 距 离 底 边缘 20 像 素 。 





<position> 值 也 支持 百分比 值 ， 不 过 其 表现 与 CSS 中 其 他 的 百 分 
比 单位 表现 都 不 一 样 。 例 如 ， 一 个 图 片 : 


img { position: absolute; left: 166%; } 


一 定 是 在 包含 块 的 外 部 。 但 是 ， 在 <position> 值 中 却 是 不 一 样 的 表 
现 ， 如 图 9-6 所 示 。 其 中 ， 上 面 美女 图 片 是 packground- 
position:166% 166% 定位 ， 下 面 半 透明 的 美女 图 片 是 left :166% 定 
位 。 位 置 明显 不 一 样 ， 主 要 是 cposition> 值 的 百分比 值 有 着 特殊 的 计 
算 公 式 : 





positionX = (容器 的 宽度 妈 片 也 * percentX; 








positionY = (容器 的 高 度 到 片 的 高 * percenty; 





因此 ， 当 background-position:166% 166% 时 候 ， 实 际 定位 值 就 是 容 
器 尺寸 和 图 片 尺寸 的 差 ， 于 是 束 有 了 右 下 角 所 示 的 定位 效果 。 


有 了 这 个 公式 ， 我 们 也 就 能 理解 百分比 负 值 的 一 些 表现 了 。 比 方 
说 ， 你 觉得 下 面 这 行 CSS 代 码 对 应 图 片 的 表现 是 怎样 的 ? 


background-position: -56% -56%; 


是 不 是 觉得 图 片 应 该 是 定位 在 容 占 的 左上 角 ， 并 有 部 分 区 域 超出 不 可 
见 ? 但 是 ， 实 际 出 现 的 效果 如 图 9-7 所 示 ， 接 近 于 下 面 CSS 代 码 的 效果 : 


background-position: 46px 16px; 

















图 9-6 ”两 个 不 同 的 百分比 定位 效果 





图 9-7 负 值 百分比 定位 图 片 在 容器 内 效果 示意 

深 受 传统 百分比 定位 迷惑 的 我 们 可 能 一 时 会 想 不 通 ， 明 明 是 个 负 值 

百分比 定位 ， 怎 么 会 是 一 个 正 值 效 朱 呢 ? 我 们 套用 <positiony> 百分比 
值 计 算 公 式 ， 束 露 然 开明 了 ! 


此 案例 中 容器 尺寸 是 160x160， 图 片 尺 寸 是 256x192， 图 片 尺 寸 大 于 
容器 尺寸 ， 所 以 : 





。 (容器 的 宽度 -图 瞩 的 宽度 ) x (-50%) 的 结 来 是 个 正信 ; 
。 (和 容 融 的 高 度 - 图 片 的 高 度 ) x (-50%) 的 结 末 也 是 个 正 值 。 











因此 ， 最 终 的 表现 并 不 是 图 片 定位 在 容器 外 ， 而 是 定位 在 容 絮 内 。 


9.2.3 ” background-repeat 与 泻 染 性 能 


background-repeat 文 持 repeat 、repeat-x 、repeat-y 这 几 
个 值 ， 语 义 清晰 ， 兼 容 性 好 ， 没 什么 有 趣 的 故事 。background- 
repeat 以 前 用 得 很 多 ， 但 如 今 设计 趋势 是 喜欢 局 平和 纯色 ， 其 使 用 频 
率 下 降 明 显 ， 反 倒是 在 实现 一 些 复 杂 纹 理 或 者 配合 “ 蝉 原则 ”实现 随机 背 
景 这 些 比较 新 测 的 地 方 见 到 的 比较 多 。 





唯一 值得 一 提 的 一 个 小 知识 点 就 是 background-repeat 的 性 能 。 
举 个 例子 ， 要 实现 某 黑 色 半 透明 遮 单 背 景 ， 因 为 了 正 8 并 不 文 持 rgba 半 透 
明 背 景色 ， 所 以 为 了 兼容 我 们 决定 使 用 一 个 半 透 明 图 片 代 着 ， 假 设 图 睫 
名 为 alpha.png ， 则 CSS 代 码 如 下 : 





.overlay { 
background: url(alpha.png); 


background: rgba(6,6,6,.75); 
} 





然后 有 些 人 为 了 追求 极致 ， 就 把 alpha.png 做 成 了 1 像素 x1 像 素 大 
小 ， 确 实 图 片 太 寸 小 了 那么 一 点 点 ， 但 是 遮 尝 背 景 出 现 的 时 候 会 有 明显 
的 卡 顿 ， 体 验 非常 不 好 。 完 其 原因 ， 就 是 平 铺 图 片 太 寸 太 小 ， 平 铺 次 数 
太 多 ， 演 染 太 吃力 ， 其 实 我 们 大 可 把 背景 图 保存 成 100 像 素 x100 像 素 大 
小 ， 这 样 一 来 ， 图 片 尺 寸 并 没有 大 多 少 ， 但 古 泻 染 性 能 却 有 明显 提升 。 








9.2.4 外 强 中 于 的 background-attachment :fixed 


background-attachment:fixed 怕 是 很 多 人 都 没 用 过 ， 甚 至 都 没 
见 过 。 这 是 一 个 下 7 浏览 器 就 开始 支持 的 CSS 声 明 。 在 CSS 世 界 


中 ，background-attachment 支持 scroll 和 fixed 两 个 属性 值 ， 其 
中 scroll 是 默认 值 ， 就 是 平 弟 使 用 背景 图 的 效果 表现 ，fixed 表示 背 
景 相 对 于 当前 文档 视 区 定位 ， 也 就 是 页 面 再 怎么 滚动 背景 图 片 位 置 依旧 
纹 丝 不 动 ， 稳 知 泰 山 。 








听 上 去 ，background-attachmen:fixed 应 该 和 position: 
fixed 声明 一 样 ， 是 个 很 厉害 的 角色 才 对 。 但 实际 上 其 外 强 中 干 ， 在 某 
些 场合 它 确实 很 历 害 ， 但 是 局 限 太 大 ， 没 法 实用 。 














举 个 例子 。 要 实现 一 个 图 片 局 部 动态 模糊 效果 ， 如 图 9-8 所 示 。 此 
时 ，background-attachment:fixed 就 可 以 大 显 神威 了 : 





图 9-8 方块 区 域 可 拖 忠 ， 移 动 到 哪里 哪里 就 模糊 





.box { 
width: 256px; height: 192px; 
background-image: url(1.jpg); 
background-attachment: fixed; 
position: relative; 
overflow: hidden; 

} 

.box > .drag { 
width: 166px; height: 166pX; 
background: inherit; 
filter: blur(5px); 
cursor: grab; 


position: absolute; 


} 





此 时 ， 只 要 .drag 元 素 动态 改变 left/top 值 ， 我 们 的 功能 就 实现 了 。 

因为 .drag 元 素 的 background 继承 于 父 元 素 .box ， 同 样 的 背景 图 ， 同 
样 的 background-attachment: fixed 锁定 ， 根 本 就 不 需要 JavaScript 
动态 改变 background-position 位 置 ， 因 为 元 素 都 是 相对 于 文档 视 区 


定位 的 。 





这 看 似 美 好 ， 却 有 一 个 很 大 的 局 限 性 ， 那 就 是 页 面 的 高 度 不 能 超过 
一 屏 ， 因 为 页 面 一 旦 可 以 滚动 ， 效 果 就 完全 被 毁 反 ， 背 景 图 立马 就 显示 
不 全 了 ， 因 为 元 素 被 深 走 了 ， 但 是 背景 图 还 是 固定 的 。 如 图 9-9 所 示 。 














ee 





ps 


图 9-9 页 面 滚动 时 候 ， 背 景 定位 完全 不 合乎 预期 





而 绝 大 多 数 网 页 都 是 可 滚动 的 ， 这 就 让 background- 
attachment:fixed 只 能 局 限于 窗 体 背 景 图 的 使 用 上 。 当 然 ， 也 有 不 太 
好 的 支持 方法 ， 就 是 background-attachment: fixed 交互 做 出 一 个 
独立 的 小 页 面 ， 然 后 主页 面 使 用 一 个 小 的 ijframe 骨 套 。 





IE9 及 以 上 版 本 浏览 器 新 增 了 一 个 background- attachment 属性 


值 ]ocal ， 难 道 它 就 是 用 来 解决 上 面 的 “不 合乎 预期 ”的 现象 的 ? 不 好 意 
思 ， 你 想 多 了 ， 它 们 不 是 一 路 的 。local 的 作用 是 ， 如 果 .box 元 素 可 
以 滚动 ， 则 .box 元 素 的 背景 图 也 可 以 被 深 走 ， 默 认 的 scroll 值 是 固定 
的 ， 和 fixed 无 半点 儿 关 系 。 


9.2.5 background-color 背景 色 永 远 是 最 低 的 


什么 意思 呢 ? 就 是 packground 无 论 是 单 背景 图 还 是 多 背景 图 ， 背 
景色 一 定 是 在 最 底下 的 位 置 。 知 道 这 一 特性 有 什么 作用 呢 ? 为 了 及 时 准 
确 反 馈 用 户 的 点 击 行为 ， 我 们 会 在 链接 或 按钮 元 素 上 增加 :active 样 
式 ， 通 常 的 思路 是 :active 时 变换 一 下 背景 色 ， 但 是 这 样 有 一 个 很 大 的 
问题 ， 即 每 个 按钮 的 背景 色 都 是 不 一 样 的 ， 那 岂 不 是 要 写 很 多 
个 :active 样式 ? 有 没有 什么 整 站 通用 的 简单 代码 呢 ? 当然 有 。 我 们 可 
以 试 试 使 用 背景 图 片 代 共 背景 色 。 例 如 : 























a[href]:active, button:active { 
background-image: linear-gradient(to top，rgba(6,9,6,.65)，rgba(6,60,0,.6 


5)); 
} 

















因为 背景 色 一 定 是 在 最 底下 的 位 置 ， 所 以 这 里 的 background-image 一 
定 是 覆盖 在 按钮 等 元 素 背 景色 之 上 的 ， 不 会 影响 按钮 原来 的 背景 





如 果 是 果 面 端 Web 项 目 ， 需 要 兼容 IE8 和 IE9 浏 览 占 ， 我 的 建议 是 使 
用 一 个 同等 效果 的 PNG 图 片 代 替 ， 有 具体 代码 如 下 : 





a[href]:active，button:active { 

/* IE8, IE9 */ 

background-image: url(data:image/png;base64,iVBORweOKGgoAAAANSUhEUgAAAAoA 
AAAKCAY 


AAACNMs+9AAAAGXRFWHRTb2Z8d2FyZQBBZG9iZSBJbWFnZVJl1YWR5ccl1l1PAAAABhJREFUeNpiz 
GBg4Gug 
AjCOKqSvQoAAAwB65ACNoFNUMwAAAABJRUSErkJggg==); 

/* IE18+ */ 

background-image: linear-gradient(to top，rgba(6,9,6,.65)，rgba(6,0,0,.9 
5)); 
} 





大 功 告 成 ! 








9.2.6 ”利用 多 青 景 的 属性 hack 小 技巧 





虽然 正 8 浏览 融 并 不 文 持 多 背景 ， 但 是 并 不 表示 匡 8 浏览 器 和 多 背景 
效果 无 缘 。 因 为 IE8 浏 览 器 支持 :before 和 :after 两 个 伪 元 素 ， 所 以 配 
合 z-index 负 值 ， 我 们 可 以 实现 最 多 3 个 图 片 的 多 背景 效果 ， 对 绝 大 部 
分 的 需求 来 说 足够 了 。 


另外 ， 我 们 还 可 以 利用 多 背景 来 区 分 特定 的 浏览 器 。 举 个 例子 ， 
IE9 是 文 持 SVG 背景 图 片 的 ， 但 正 8 不 文 持 ， 于 是 我 们 可 以 让 IE8 浏 览 器 
加 载 PNG 图 片 ， 而 IE9 及 以 上 版 本 浏览 器 加 载 SVG 图 片 ， 这 样 就 不 用 使 
用 烦人 的 多 倍 图 了 。 下 面 问题 来 了 ， 如 何 有 效 地 区 分 IE8 和 IE9 浏 览 器 
呢 ? 





常用 的 :root .ie9 {} hack 技 巧 会 提高 元 素 的 权重 ， 并 不 是 一 个 
完美 的 方法 ， 而 巧 用 一 些 CSS3 属 性 或 属性 值 做 兼容 处 理 则 是 上 乘 的 技 
术 策 略 。 例 如 ， 这 里 就 可 以 这 样 处 理 ; 


.bg { 
background: url(icon.png); 


background: url(icon.svg), none; 


} 











IE8 浏 览 喜 不 认识 多 背景 的 写法 ， 目 然 会 急 略 第 二 行 声 明 ， 只 认 第 
一 行 的 PNG 背 景 ， 耻 9 及 以 上 版 本 浏 让 器 则 会 使 用 后 面 的 声明 使 用 SVG 
图 片 。 


趁 热 打铁 ， 请 问 如 果 要 区 分 IE9 及 以 下 版 本 和 IE10 及 以 上 版 本 ,该 
怎么 办 呢 ? 我 们 可 以 这 么 处 理 : 


.bg { 
background: url(loading.gif); 
background: url(loading.png), linear-gradient(to top, transparent, trans 


parent); 


} 





IE9 不 认识 CSS3 渐 变 ， 因 此 会 忽略 第 二 行 CSS 声 明 。 
9.2.7 ”渐变 背景 和 rgba 背景 色 的 兼容 处 理 


IE9 浏 览 器 不 文 持 背景 渐变 ， 不 过 ， 也 是 有 手段 可 以 做 兼容 的 ， 那 
就 是 使 用 正 私 有 的 渐变 滤 锐 。 例 如 ， 一 个 红 蓝 渐变 ， 可 以 使 用 下 面 的 代 
人 码 : 


filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red, endc 
olorstr= 


blue, gradientType=1); 








这 行 滤 镜 代码 主要 有 3 个 参数 ， 依 次 是 startcolorstr 、endcolorstr 
和 gradient Type 。 其 中 gradientType=1 代表 横向 渐 

变 ，gradientType=6 代表 纵 同 淅 渐变 ，startcolorstr 代表 渐变 起 
始 的 色彩 。 除 了 使 用 颜色 关键 字 ， 还 可 以 使 用 十 六 进 制 颜色 表示 法 ， 如 
startcolorstr=#FF6666 ; endcolorstr 代表 渐变 结尾 的 色彩 ， 也 支 


持 十 六 进 制 颜色 表示 法 ， 如 endcolorstr=#6@6866FF 。 


想 要 渐变 半 透 明 怎 么 办 ?可 以 使 用 下 浏览 器 的 8 字符 的 十 六 进 制 颜 
色 表 示 法 ， 其 格式 为 #AARRGGBB，AA、RR、GG、BB 均 为 十 六 进 制 正 整 
数 ， 取 值 范围 为 00 一 FF。RR 指定 红色 值 ，GG 指定 绿色 值 ，BB 指定 蓝 色 
值 ，AA 指定 透明 度 。00 表 示 完 全 透明 ，FF 表 示 完 全 不 透明 。 超 出 取 值 
范围 的 值 将 被 恢复 为 默认 值 。 例 如 ， 渐 变 起 始 红色 可 以 写 
成 startcolorstr= #FFFF6666 。 


有 些 人 并 不 清楚 如 何 将 0 一 1 的 CSS3 标 准 透明 度 值 转换 成 十 六 进 
制 。 事 实 上 ， 可 以 这 样 处 理 : 打开 浏览 器 控制 台 ， 假 设 需要 转换 的 透明 
度 是 opacity ， 则 可 以 输入 下 面 的 代码 再 回 车 : 


Math.round(256 * opacity) .toSstring(16); 


综 上 所 述 ， 要 想 实 现 一 个 100% 红 色 到 50% 透 明度 蓝 色 垂 直 渐 变 ， 可 
以 使 用 如 下 代码 组 合 : 


.gradient { 

filter: 
progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFF688806,endcolo 
rstr=#7 


F6666FF,gradientType=6) ; 
background: linear-gradient(to bottom，red，rgba(6,6,255,，.5)); 
} 





IE8 浏 览 器 不 支持 rgba 半 透 明 背 景色 ， 除 了 使 用 PNG 图 片 外 ， 也 可 
以 使 用 渐变 滤 镜 来 兼容 。 例 如 ， 要 实现 50% 半 透明 的 黑色 背景 ， 可 以 这 
样 做 : 





.bgcolor { 
background: rgba(6,6,6,，.5); 
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr= 
#7F606666,endcolorstr=#7F600000 ) 
} 
:root .bgcolor { 
filter: none; 


} 





让 渐变 起 始 色 和 结束 色 保 持 一 致 ， 就 可 以 实现 纯 半 透明 背景 色 效 果 了 。 
在 IE9 浏 览 器 下 ，rgba 半 透 明和 filter 渐变 会 同时 起 作用 ， 因 此 使 
用 :root 选择 器 重 置 了 一 下 。 








第 10 章 “元素 的 显示 与 隐藏 


使 用 CSS 让 元 素 不 可 见 的 方法 很 多 ， 甬 裁 、 定 位 到 屏幕 外 、 明 度 变 
化 等 都 是 可 以 的 。 虽 然 它 们 都 是 肉眼 不 可 见 ， 但 背后 却 在 多 个 维度 上 都 
有 差别 。 





下 面 是 我 总 结 的 一 些 比较 好 的 隐藏 实践 。 





。 如 宁 和 希望 元 系 不 可 见 ， 同 时 不 占据 空间 ， 和 辅助 设备 无 法 访问 ， 同 时 
不 泻 染 ， 可 以 使 用 <script> 标签 隐藏 。 例 如 ; 


<«script type="text/html"> 


<img src="1.jpg"> 
</script> 





此 时 ， 图 片 1.jpg 是 不 会 有 请 求 的 。<script> 标签 是 不 文 持 般 套 
的 ， 因 此 ， 如 果 硕 望 在 Cscript> 标签 中 再 放置 其 他 不 演 染 的 模板 内 
容 ， 可 以 试 试 使 用 <textarea> 元 素 。 例 如 : 
<script type="text/html"> 


<img src="1.jpg"> 
<textarea style="display:none;"> 


<img src="2.jpg"> 
</textarea> 
</script> 





图 片 2.jpg 也 是 不 会 有 请 求 的 。 





另外 ，<script> 标签 隐藏 内 容 获 取 使 用 script.innerHTML 


，<textarea> 使 用 textarea.value 。 





。 如 果 和 希望 元 素 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ， 但 资 
源 有 加 载 ，DOM 可 访问 ， 则 可 以 直接 使 用 display:none 隐藏 。 例 
如 : 





.dn { 
display: none; 








。 如 果 希 望 元 系 不 可 见 ， 同 时 不 占据 空间 ， 辅 助 设备 无 法 访问 ,但 显 
隐 的 时 候 可 以 有 transition 淡 入 淡出 效果 ， 则 可 以 使 用 : 
.hidden { 


position: absolute; 
visibility: hidden; 








。 如 果 希 望 元 素 不 可 见 ， 不 能 点 击 ， 辅 助 设备 无 法 访问 ， 但 占据 空间 
保留 ， 则 可 以 使 用 visibility:hidden 隐藏 。 例 如 : 


.vh { 
visibility: hidden; 











。 如 果 和 希望 元 素 不 可 见 ， 不 能 点 击 ， 不 占据 空间 ， 但 键盘 可 访问 ， 则 
可 以 使 用 clip 剪裁 隐藏 。 例 如 : 


.Clip { 
position: absolute; 


} 


} 


} 


} 


clip: rect(60 60 0 0) | 


out { 
position: relative; 
left: -999em; 











。 如 果 希 望 元 素 不 可 见 ， 不 能 点 击 ， 但 占据 空间 ， 且 键盘 可 访问 ， 则 
可 以 试 试 relative 隐藏 。 例 如 ， 如 果 条 件 允 许 ， 也 区 是 和 层 登 上 
下 文 之 间 存 在 设置 了 背景 色 的 父 元 素 ， 则 也 可 以 使 用 更 友好 的 z- 
index 负 值 隐藏 。 例 如 : 





lower { 
position: relative; 
z-index: -1; 











。 如 采 硕 望 元 系 不 可 见 ， 但 可 以 点 击 ， 而 且 不 占据 空间 ， 则 可 以 使 用 
透明 度 。 例 如 : 


opacity { 

position: absolute; 
opacity: 0@; 

filter: Alpha(opacity=0); 








。 如 有 果 单 纯 希 望 元 素 看 不 见 ， 但 位 置 保留 ， 依 然 可 以 点 可 以 选 ， 则 直 
接 让 透明 度 为 8 。 例 如 : 
opacity { 


opacity: 0@; 
filter: Alpha(opacity=0); 








读者 可 以 根据 实际 的 隐藏 场景 选择 合适 的 隐藏 方法 。 不 过 ， 实 际 开 
发 场景 干 变 万 化 ， 上 面 罗列 的 实践 不 足以 履 盖 全 部 情形 。 例 如 ， 在 标签 
受 限 的 情况 下 希望 隐藏 某 文 字 ， 可 能 使 用 text-indent 缩 进 是 最 友好 
的 方法 。 如 果 和 希望 显示 的 时 候 可 以 加 一 个 transition 动画 ， 就 可 能 要 
使 用 max-height 进行 隐藏 了 。 例 如 : 








.hidden { 
max-height: 6; 


overflow: hidden; 


} 





此 案例 在 3.3 节 的 max-height 部 分 已 有 展示 ， 这 里 就 不 多 说 了 。 


10.1 display 与 元 素 的 显 隐 


对 一 个 元 素 而 言 ， 如 果 display 计算 值 是 none 则 该 元 素 以 及 所 有 
后 代 元 素 都 隐藏 ， 如 果 是 其 他 display 计算 值 则 显示 。 








display 可 以 说 是 Web 显 隐 交 互 中 出 场 频 率 最 高 的 一 种 隐藏 方式 ， 
是 真正 意义 上 的 隐藏 ， 干 净利 落 。 人 们 对 它 的 认识 也 比较 准确 ， 无 法 点 
击 ， 无 法 使 用 屏幕 阅读 器 等 辅助 设备 访问 ， 占 据 的 空间 消失 ， 但 很 多 人 
就 仅 局 限于 此 了 ， 实 际 上 ，display:none 的 故事 并 不 只 有 这 么 一 点 


Wyo 


在 Firefox 浏 览 器 下 ，display :none 的 元 素 的 background-image 
图 片 是 不 加 载 的 ， 包 括 父 元 素 display :none 也 是 如 此 ; 如 果 是 Chrome 
和 Safari 浏 览 器 ， 则 要 分 情况 ， 知 父 元 素 display:none ， 图 请 不 加 





载 ， 奉 本 里 背景 图 所 在 元 系 隐 藏 ， 则 图 片 依旧 会 去 加 载 ， 对 正 浏览 器 而 
言 ， 无 论 怎样 都 会 请 求 图 片 资 源 。 


CSS 和 HTML 代 码 如 下 : 


.bg1 { 

background: url(../Images/1.png); 
} 
.bg2 { 


background: url(../Images/2.png); 


<div hidden class="bg1"></div> 
<div hidden><div class="bg2"></div></div> 





在 Chrome 浏 览 器 下 的 网 络 请 求 如 图 10-1 所 示 。 





禾 | 字 | View: 三 王 preserve log 国 Disable cache 
te Regex Hide data URLs All | XHR JS CSS Wh 


10 ms 20 ms 30 ms 40 ms 50 ms 60 ms 70 


Name Method | Status Type Initiator Size 


”| i.png GET 200 png background-i... E 





图 10-1 Chrome 浏览 器 下 图 片 请 求 


我 们 发 现 只 加 载 了 1.png ， 因 此 ， 在 实际 开发 的 时 候 ， 如 头 图 轮 播 
切换 效果 ， 那 些 默 认 需 要 隐藏 的 图 片 作 为 背景 图 藏 在 隐藏 元 又 的 子 元 素 
上 ， 微 小 的 改动 就 可 以 明显 提升 页 面 的 加 载体 验 ， 可 以 说 是 非常 实用 的 
小 技巧 。 











另外 ， 如 果 不 是 packground-image 图 片 ， 而 是 <img> 元 素 ， 则 设 
置 display:none 在 所 有 浏览 器 下 依旧 都 会 请 求 图 片 资源 。 


照 理 说 ，display :none 的 元 素 应 该 是 无 法 被 点 击 
的 ，display :none 可 以 非常 彻底 地 隐藏 ， 肯 定 不 能 点 击 啊 ! 但 是 ， 下 
面 这 种 情况 却 例外 : 


<form> 
<input id="any" type="submit" style="display:none;"> 


<label for="any"> 提 交 </1label> 
</form> 





此 处 submit 类 型 的 “提交 ”按钮 设置 了 display:none ， 但 是 当 我 
们 点 击 “ 提 交 ” 的 时 候 ， 隐 藏 的 按钮 依然 会 触发 click、 触 发 表单 提交 ， 
此 现象 出 现在 IE9 及 以 上 版 本 浏览 器 以 及 其 他 现代 浏览 器 中 。 


设置 display :none 的 意义 在 于 ， 当 按钮 和 <label> 元 素 不 在 一 个 
水 平 线 上 的 时 候 ， 点 击 <label> 元 素 不 会 触发 锚 点 定位 。 但 是 我 并 不 推 
么 做 ， 因 为 submit 按钮 会 丢失 键盘 可 访问 性 。 





HTML 中 有 很 多 标签 和 属性 天 然 display:none ， 如 <style> 
、<script> 和 HTML5 中 的 <dialog> 元 素 〈( 如 果 浏 览 器 支持 ) 。 如 果 
这 些 标签 在 <body> 元 素 中 ， 设 置 display: block 是 可 以 让 内 联 CSS 
和 JavaScript 代 人 码 直接 在 页 面 中 显示 的 。 例 如 : 


<style style="display:block;"> 
.1 { float: left; } 


</style> 





页 面 上 就 会 出 现 .1 { float: left; } 的 文本 信息 ; 如果 再 设 
置 contenteditable= "true" ， 在 有 些 浏览 器 下 (如 Chrome) ， 甚 至 
可 以 直接 实时 编辑 预览 页 面 的 样式 。 





还 有 一 些 属性 也 是 天 然 display:none 的 。 例 如 ，hidden 类 型 的 
<input> 输入 框 : 


<input type="hidden" name="id" value="1"> 








专门 用 来 放置 类 似 token 或 者 id 这 样 的 隐藏 信息 ， 这 也 说 明 表 单元 对 
的 显示 与 隐藏 并 不 影响 数据 的 提交 ， 其 真正 影响 的 是 disabled 属性 。 





HTML5 中 新 增 了 hidden 这 个 布尔 属性 ， 可 以 让 元 素 天 
生 display:none 隐藏 。 例 如 : 


<div hidden> 看 不 见 我 </divy> 


IE11 以 及 其 他 现代 浏览 器 都 支持 它 ， 因 此 ， 如 果 要 兼容 保 面 辣 ， 需 
要 如 下 CSS 设 置 : 





[hidden] { 
display: none; 





display :none 显 隐 控制 并 不 会 影响 CSS3 animation 动画 的 实 
现 ， 但 是 会 影响 CSS3 transition 过 渡 效 果 执 行 ， 因 此 transition 往 
往 和 visibility 属性 走 得 比较 近 








对 于 计数 器 列表 元 素 ， 如 果 设 置 display:none ， 则 该 元 素 加 入 计 
数 队列 。 举 个 例子 ，10 个 列表 从 1 开始 递增 ， 假 设 第 二 个 列表 设置 了 
display:none ， 则 原来 的 第 三 个 列表 计数 变 成 2， 最 后 总 计数 是 9。 


10.2 visibility 与 元 素 的 显 隐 


10.2.1 不 仅仅 是 保留 空间 这 么 简单 


有 一 些 人 简单 地 认为 display:none 和 visibility:hidden 两 个 
隐藏 的 区 别 就 在 于 : display:none 隐藏 后 的 元 素 不 占据 任何 空间 ， 
而 visibility:hidden 隐藏 的 元 素 空 间 依旧 保 留 。 实 际 上 并 没有 这 人 么 
简单 ，visibility 是 一 个 非常 有 故事 的 属性 。 














1. visibility 的 继承 性 


首先 ， 它 最 有 意思 的 一 个 特点 就 是 继承 性 。 父 元 素 设 
置 visibility:hidden ， 子 元 素 也 会 看 不 见 ， 究 其 原因 是 继承 性 ， 子 
元 素 继承 了 visibility:hidden ， 但 是 ， 如 果子 元 素 设置 了 
visibility:visible ， 则 子 元 素 又 会 显示 出 来 。 这 个 和 display 隐 
藏 有 着 质 的 区 别 。 





我 们 看 一 个 例子 来 切实 感受 一 下 ，HTML 代 码 如 下 : 


<ul style="visibility:hidden;"> 
<1li style="visibility:visible;"> 列 表 1</1i> 


<1i> 列 表 2</1i> 

<1i> 列 表 3</1i> 

<1li style="visibility:visible;"> 列 表 4</1i> 
</U]> 





列表 父 元 素 visibility:hidden ， 和 于 万 不 要 想当然 地 认为 此 时 所 
有 子 元 素 就 都 不 可 见 了 ， 最 终 效果 如 图 10-2 所 示 , “列表 1” 和 “列表 4” 依 
上 日 清晰 可 见 。 





眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/10/2-1.php 或 者 扫 右 侧 
的 二 维 码 。 





这 种 visibility:visible 后 代 可 见 的 特性 ， 在 实际 开发 的 时 候 非 
常 有 用 。 例 如 ， 它 可 以 让 异步 加 载 时 体验 更 好 。 举 个 我 上 周 项 目 中 遇 到 
的 案例 ， 使 用 头像 上 传 功能 ， 上 传 完毕 要 进入 剪裁 界面 ， 界 面 如 图 10-3 
所 示 。 





图 10-2 ”visibility 继承 性 演示 效果 


夫 尺 寸 了 预览 
草 载 下 城 


中 尺 才 预览 


上 尺寸 预览 


图 10-3 “剪裁 界面 示意 














这 里 就 有 一 个 异步 的 过 程 ， 后 端 只 返回 了 一 个 图 片 地 址 ， 我 们 需要 
先 动态 获取 图 片 尺寸 ， 再 去 计算 ， 以 便 准 确 显示 缩 略 效果 以 及 初始 化 剪 
裁 功 能 。 比 较 差 一 点 儿 的 方法 就 是 先 用 默认 头像 占 位 ， 等 获取 到 图 片 尺 
寸 后 再 蔡 换 ， 或 者 借助 visibility 属性 。 





模块 外 部 容器 设置 visibility:hidden ， 剪 裁 区 域 里 面 放 一 个 加 


载 效果 ， 设 


置 visibility:visible 。 图 片 尺寸 获取 成 功 后 ， 再 正常 


初始 化 ， 然 后 让 外 部 容器 visibility 属性 重 置 为 visible 。 这 样 体验 
就 会 好 很 多 ， 用 户 只 会 看 到 “加 载 中 ~ 剪裁 界面 >， 而 不 是 “ 占 位 界面 ~ 
加 载 中 最 终 操作 界面 ”。 





HTML 示 意 如 下 : 





<div style=" 
<div class 


visibility:hidden;"> 
="main-box"> 
<div class="operate-box"> 
<i class="icon-loading" style="visibility:visible;"> 


| 


加 载 中 ... 





</i> 
</div> 


<div class="button-box"> 
<button> 确 定 </button> 
<button> 取 消 </button> 


</div> 

</div> 

<div class="preview-box"> 
大 ， 中 ， 小 预览 


</div> 


</div> 





2. visibility 与 CSS 计 数 器 


visibility:hidden 不 会 影响 计数 器 的 计数 ， 这 和 display :none 
完全 不 一 样 。 举 个 例子 ， 如 下 CSS 和 HTML 代 码 : 


.vh { 

visibility: hidden; 
} 
.dn { 

display: none; 


ol { 
border: 1px solid; 
margin: 1lem 6; 
counter-reset: test; 

} 

li:after { 
counter-increment: test; 
content: counter(test); 

} 

<01> 
<1i> 列 表 </1i> 
<1li class="dn"> 列 表 </1iy> 
<1i> 列 表 </1i> 
<1i> 列 表 </1i> 

</o1> 

<01> 
<1i> 列 表 </1i> 
<1li class="vh"> 列 表 </1iy> 
<1i> 列 表 </1i> 
<1i> 列 表 </1i> 

</o01> 




















结果 如 图 10-4 所 示 。 
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图 10-4 visibility 和 display 隐藏 与 CSS 计 数 器 效果 


可 以 看 到 ，visibility:hidden 虽然 让 其 中 一 个 列表 不 可 见 了 ， 
但 是 其 计数 效果 依然 在 运行 。 相 比 之 下 ， 设 置 display :none 的 列表 束 
完全 没有 参与 计数 运算 。 


3. visibility 与 transition 





下 面 的 CSS 是 会 让 .box 元 素 hover 时 显示 .target 子 元 素 ， 但 不 
会 有 过 渡 效 果 : 


.box > .target { 
display: none; 
position: absolute; 
opacity: 0@; 
transition: opacity .25s; 
} 
.box:hover > .target { 
display: block; 
opacity: 1; 
} 





但 是 ， 下 面 的 CSS 语 句 却 可 以 让 .target 子 元 素 有 淡出 的 过 渡 效 果 : 





.box > .target { 
position: absolute; 
opacity: 0@; 
transition: opacity .25s; 
visibility: hidden; 


.box:hover > .target { 
visibility: visible; 
opacity: 1; 

} 





这 是 为 什么 呢 ? 因为 CSS3 transition 支持 的 CSS 属 性 中 有 
visibility， 但 是 并 没有 display 。 


由 于 transition 可 以 延 时 执行 ， 因 此 ， 和 visibility 配合 可 以 
使 用 纯 CSS 实 现 hover 延 时 显示 效果 ， 由 此 提升 我 们 的 交互 体验 。 





图 10-5 所 示 是 一 个 很 常见 的 hover 悬浮 显示 列表 效果 ， 而 且 有 多 个 
触发 点 相 邻 ， 对 于 这 种 hover 交互 ， 如 果 在 显示 的 时 候 增 加 一 定 的 延 
时 ， 可 以 避免 不 经 意 触 碰 导致 覆盖 目标 元 素 的 问题 。 例 如 ， 几 10-5 虽 然 
显示 的 是 第 一 行 的 下 拉 列 表 ， 但 真相 即 可 能 是 : 我 本 来 想 去 hover 第 二 
行 的 “操作 ”文字 ， 但 是 由 于 鼠标 光标 移动 路 径 不 小 心经 过 了 第 一 行 
的 “操作 ”， 结 果 把 第 二 行 本 来 hover 的 “操作 ”覆盖 了 ， 必 须 重 新 移出 
去 ， 避 开 干扰 元 素 ， 重 新 hover 才 行 。 如 此 一 来 ， 体 验 就 不 好 了 。 


栏目 1 栏目 2 人 


栏目 1 栏目 2 记 




















10-5 hover 显示 列表 示意 


但 是 有 了 visibility 属性 和 transition 延 时 ， 我 们 就 可 以 把 这 
种 不 悦 的 体验 消除 挥 ， 关 键 的 HTML 和 CSS 代 人 码 如 下 : 


<td> 
<a href> 操 作 vwx</a> 





<div Class="1ist"> 
<a href> 编 辑 </a> 
<a href> 删 除 </a> 
</div> 
</td> 
.list { 
position: absolute; 
visibility: hidden; 


td:hover .list { 
visibility: visible; 
transition: visibility 6s .2s; 


} 





transition 在 hover 时 候 声 明 可 以 让 鼠标 光标 移出 的 时 候 列 表 无 
延 时 地 迅速 隐藏 。 





有 了 上 面 的 CSS 处 理 ， 当 我 们 鼠标 光标 奔 癌 第 二 行 的 “操作 ”按钮 ， 
但 不 小 心经 过 第 一 行 “操作 ”按钮 时 ， 束 不 会 发生 瞬间 出 现 列 表 而 窗 新 目 
标 元 素 的 问题 了 。 大 家 可 以 手动 输入 http://demo.cssworld.cn/10/2-3.php 
这 个 地 址 杀 目 感受 一 下 。 





transition 隐藏 除了 和 transition 友好 外 ， 与 display :none 
相 比 ， 其 在 JavaScript 侧 也 更 加 友好 。 存 在 这 样 的 场景 : 我 们 需要 对 隐藏 
元 素 进行 尺寸 和 位 置 的 获取 ， 以 便 对 交互 布局 进行 精准 定位 。 此 时 ， 建 
议 使 用 visibility 隐藏 
.hidden { 


position: absolute; 
visibility: hidden; 


} 








原因 是 ， 我 们 可 以 准确 计算 出 元 系 的 尺寸 和 位 置 ， 如 果 使 用 的 








是 display:none ， 则 无 论 是 尺寸 还 是 位 置 都 会 是 9 ， 计 算 束 会 不 准 
确 。 例 如 ， 假 设 element 是 页 面 上 某 个 display :none 隐藏 元 素 DOM 
对 象 ， 则 : 

console.log('clientWidth: ”+ element.clientWidth); 


console.log('clientHeight: ”+ element.clientHeight); 
console.log('clientLeft: ' + element.clientLeft); 


console.log('clientTop: ' + element.clientTop); 
console.dir(element.getBoundingClientRect()); 





结果 会 如 图 10-6 显 示 的 那样 全 部 都 是 8 。 


clientWidth: 6 

clientHeight: 8 

clientLeft: 9 

cliientTop: 8 

Vv ClientRect 
bottom: 8 
height: 8 
right: 9 
en [a 


+h 0 
K 


国 : ClientRect 





图 10-6 display:none 元 素 尺 寸 和 位 置 计算 值 全 部 都 是 0 














不 仅 如 此 ，transition 隐藏 在 无 障碍 访问 这 一 块 也 比 
display:none 更 友好 些 。 举 个 例子 ， 对 于 一 个 点 击 遮 旱 层 就 隐藏 遮 旱 
层 的 交互 ， 很 多 人 可 能 是 这 么 实现 的 : 





overlay.onclick = function () { 
this.style.display = 'none'; 


}; 





如 果 不 考 虑 无 障碍 访问 ， 这 么 实现 也 算 干 脆 利 落 ， 但 如 果 要 兼顾 无 


障碍 访问 ， 则 使 用 display :none 就 没有 使 用 visibility 友好 了 。 





声音 而 非 视觉 感知 ， 因 此 ， 


视 党 障碍 用 户 对 页 面 状 态 变 化 都 是 通过 
遮 单 浮 层 的 一 些 插 述 ， 显 示 时 


通 
就 有 必要 告知 准确 的 状态 信息 。 下 面 就 是 
和 隐藏 时 分 别 如 下 : 








<div class="overlay"” role="button" title=" 点 击 关 闭 浮 层 "></div> 


<div class="overlay hidden" role="button" title=" 浮 层 已 关闭 "></div> 





以 iPhone 的 VoiceOver 为 例 ， 如 果 .hidden 语句 是 这 样 的 : 


.hidden { 
visibility: hidden; 
} 











那么 当 我 们 关闭 浮 层 时 ，VoiceOver 会 读 “ 浮 层 已 关闭 ”， 很 棒 ， 对 不 
对 ? 但 是 ， 如 果 .hidden 语句 是 这 样 的 : 


.hidden { 
display: none; 


} 





那么 当 我 们 关闭 浮 层 时 候 ，VoiceOver 会 读 浮 层 下 面 元 素 的 相关 信息 ， 
至 于 .overlay 元 系 是 否 关 闭 ， 就 只 能 靠 经 验 去 猜测 了 ， 这 显然 就 不 如 
visibility 友好 。 





上 面 的 案例 我 特意 做 了 一 个 演示 页 面 ， 如 果 读 者 有 屏幕 阅读 软件 ， 
可 以 手动 输入 http://demo.cssworld.cn/10/2-4.php 或 者 扫 右 侧 的 二 维 码 。 





最 后 ， 有 必要 强调 一 下 可 能 出 现 的 误区 。 





(1) 普通 元 素 的 title 属性 是 不 会 被 明 读 的 ， 除 非 辅 以 按钮 等 控 
件 元 素 ， 这 里 是 因为 设置 了 role="button" 所 以 才 可 以 朗读 。 


( 2) visibility:hidden 元 素 是 不 会 被 朗读 的 ， 注 意 ， 不 会 被 
朗读 ! 本 案例 之 所 以 会 被 朗读 ， 从 显示 到 隐藏 ， 遮 罩 层 focus 的 区 域 还 
在 〈display:none 则 丢失 ， 因 为 尺寸 位 置 全 部 变 成 6 ) ， 你 可 以 理解 
为 遮 潮 层 的 “ 遗 通 ”还 在 。 


明 读 结束 后 再 去 触 碰 这 片区 域 的 时 候 ， 是 无 论 如 何 也 找 不 到 已 经 
visibility:hidden 的 这 个 遮 叶 元 素 的 。 


10.2.2 了解 visibility:collapse 


大 家 只 要 了 解 visibility 文 持 的 属性 值 还 有 个 collapse 就 可 以 
了 。 其 他 信息 ， 类 似 原本 其 设计 是 作为 表格 用 的 ， 则 完全 不 用 在 意 ， 因 
为 对 于 表格 相关 元 素 ， 部 分 现代 浏览 器 对 visibility:collapse 的 解 
析 是 不 准确 的 ， 无 实用 价值 ， 对 于 普通 元 素 ，visibility: collapse 








又 等 同 于 visibility:hidden ， 直 接 使 用 visibility:hidden 就 好 
了 ，collapse 这 个 单词 又 长 又 难 记 住 ， 没 有 理由 使 用 。 





第 11 章 ”用户 寞 面 伞 却 


用 户 界 面 样式 指 的 是 CSS 世 界 中 用 来 帮助 用 户 进 行 界面 交互 的 一 些 
CSS 样 式 ， 主 要 有 outline 和 cursor 等 属性 。 


11.1 和 border 形似 的 outline 属性 


outline 表示 元 素 的 轮廓 ， 语 法 和 border 属性 非常 类 似 ， 分 宽 
度 、 类 型 和 颜色 ， 支 持 的 关键 字 和 属性 值 与 border 属性 一 模 一 样 。 例 
如 : 


.outline { 
outline: 1px solid #6080; 
} 


两 者 表现 也 类 似 ， 都 是 给 元 素 的 外 面 画 框 。 但 是 ， 设 计 的 作用 却 大 
相 径 庭 。 
11.1.1 万 万 不 可 在 全 局 设置 outline:@8 none 


outline 是 一 个 和 用 户 体 验 密 切 相 关 的 属性 ， 与 focus 状态 以 及 键 
可 访问 关系 密切 。 


在 桌面 端 网 页 ， 对 于 按钮 或 者 链接 ， 我 们 通常 都 是 使 用 鼠标 点 击 去 
完成 操作 。 但 是 世事 难 料 ， 总 会 存在 用 户 只 能 使 用 键盘 访问 网 站 的 情 
况 。 例 如 ， iMac 鼠标 疫 电 了 ， 或 者 鼠标 二 了， 或 者 在 乔 能 电视 中 访问 


网 站 《遥控 器 本 质 上 也 是 个 操作 键盘 ) 。 





好 在 所 有 的 浏览 器 原生 就 有 键盘 访问 网 页 的 能 力 ， 对 于 按钮 或 者 链 
接 ， 通 常 的 键盘 操作 是 : Tab 键 按 次 序 不 断 focus 控件 元 素 ， 包 括 链 
接 、 按 钮 、 输 入 框 等 表单 元 素 ， 或 者 focus 设置 了 tabindex 的 普通 元 
素 ， 按 Shift+Tab 组 合 键 反 方向 访问 。 


注意 ， 重 点 来 了 ! 在 默认 状态 下 ， 对 处 于 focus 状态 的 元 素 ， 浏 览 
器 会 通过 虚 框 或 者 外 发 光 的 形式 进行 区 分 和 提示 。 例 如 ， 在 Chrome 浏 
览 器 中 输入 框 focus 时 的 蓝 色 外 框 效 果 ， 如 图 11-1 所 示 。 


这 种 虚 框 或 者 外 发 光 效 果 是 非常 有 必要 的 ， 和 否则 用 户 根本 就 不 知道 
自己 当前 聚焦 在 哪个 元 素 上 ， 甚 至 因此 而 迷失 。 








元 素 聚 焦 后 ， 再 按 下 回 车 键 ， 就 相当 于 鼠标 点 击 了 这 个 元 素 ， 从 而 
可 以 前 往 我 们 想 去 的 目的 地 (如 <a> 链接 ) ， 或 者 执行 我 们 想 要 的 交互 
效果 (如 按钮 〉。 
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图 11-1 Chrome 输 入 框 focus 时 候 的 蓝 色 外 框 效 果 





以 上 就 是 我 们 的 键盘 访问 过 程 。 可 以 看 出 来 ， 浏 览 右 默认 的 
outline 局 党 标记 是 一 个 非常 有 用 的 行为 。 因 此 ， 类 似 下 面 的 代码 其 实 
征 非 常 不 专业 的 : 


* { 
outline: 6 none ; 
} 





奔 
alt 

outline: 6 none; 
} 


现代 浏览 器 的 focus 体验 现在 已 经 做 得 很 好 了 ， 对 于 普通 链接 或 者 
按钮 ， 当 我 们 点 击 的 时 候 ， 已 经 不 会 出 现 outline 效果 了 ， 只 有 键盘 
Tab 或 者 JavaScript 的 element .focus() 主动 触发 才 会 有 发 光 效 果 ， 
此 ， 我 实在 想 不 出 为 什么 要 设置 下 面 这样 的 CSS 代 码 : 


af 
outline: 6 none ; 
} 


对 于 输入 框 元素 ， 我 倒是 可 以 理解 ， 因 为 必须 要 先 focus 才能 输 
入 内 容 ， 一 些 浏览 器 内 置 的 focus 效果 可 能 和 我 们 的 网 页 设计 格格 不 
入 ， 因 此 需要 重 置 ， 要 使 用 专门 的 类 名 。 例 如 : 

















.Input { 
outline: 0; /* outline:none 汪 可 */ 


} 





但 是 ， 必 须 把 focus 态 样式 加 上 。 例 如 ， 我 们 可 以 让 输入 框 的 边框 闫 色 


| 同学: 


input:focus { 
border-color: Highlight; 


} 





最 后 再 强调 一 遍 : 万 万 不 可 在 全 局 设置 outline:8 none ! 这 样 的 
错误 ele 的 部 分 用 户 产 生 使 用 障碍 ! 





国内 很 多 大 站 也 会 犯 类 似 的 错误 ， 注 意 干 万 不 要 学 习 ， 二 万 不 要 模 
仿 ! 


在 实际 开发 的 时 候 ， 有 时 候 需 要 让 普通 元 素 有 类 似 控件 元 素 的 
outline 效果 。 例 如 ， 基 于 原生 的 单 复 选 框 模拟 单 复 选 框 ， 或 者 为 了 规 
避 submit 类 型 控 钮 UI 很 难 完全 保持 一 致 的 问题 ， 我 们 会 使 用 <label> 
元 素来 移花接木 ， 通 过 for 属性 和 这 些 原生 的 表单 控件 相关 联 。 例 如 : 


<input id="t" type="submit"> 
<label class="btn" for="t"> 提 交 </1label> 





原始 按钮 不 可 见 ，<1abel> 元 素 变 身 按钮 : 


[type="submit"] { 
position: absolute; 
clip: rect(60 60 0 090); 


.btn { 
display: inline-block; 
padding: 2px 12px; 


background-color: #cd606080; 
color: #fff; 

font-size: 14px; 

cursor: pointer; 





虽然 样式 上 完美 了 ， 但 却 留 下 了 一 个 键盘 可 访问 性 的 问题 : 当 我 们 
使 用 Tab 键 在 页 面 上 遍历 元 素 的 时 候 ，focus 的 是 隐藏 的 原生 提交 按 
钮 ， 而 “代言 人 ”label> 元 素 无 法 被 focus ， 这 就 会 导致 这 样 的 现象 : 








用 户 壳 历 页 面 控件 元 素 一 直 都 很 顺利 ， 突 然 要 到 提交 按钮 的 时 候 ， 页 面 
却 突然 如 死水 一 般 ， 没 有 任何 元 素 有 outline 高 腕 。 原 因 就 是 和 仆 focus 
的 按钮 元 素 处 于 隐藏 状态 ， 用 户 无 法 看 到 outline 效果 ， 此 时 我 们 就 需 
要 额外 增加 一 层 CSS 代 码 ， 让 <label> 这 个 “代言 人 ” 连 键 盘 focus 状态 
也 一 起 代言 了 ， 也 就 是 说 ， 当 我 们 focus 看 不 见 的 提交 按钮 的 时 候 ， 

让 “代言 人 ”label> 元 素 模 拟 原生 的 focus 高 党 效果 。 











:focus + label.btn { 
outline: 1px dotted Highlight; 


outline: 5px auto -webkit-focus-ring-color; 


} 





Highlight 是 系统 高 亮色 ， 这 里 用 来 模拟 正和 Firefox 浏 览 器 的 
outline 效果 相当 合适 ， 而 下 面 的 5px auto -webkit-focus-ring- 
color 是 在 Chrome 浏 览 器 下 使 用 浏览 器 目 带 的 focus 外 发 光 outline 
效果 ， 这 里 的 5px 其 实 无 天 紧要 ， 写 3px 效果 也 是 一 样 的 。 


最 后 ， 就 有 了 非常 符合 预期 的 近乎 原生 的 focus outline 效果 了 ， 
如 图 11-2 和 图 11-3 所 示 。 


图 11-2 ”Chrome 下 <label> 元 素 outline 效果 -发 光 





用 户 名 : 








提交 








图 11-3 IE 下 <label> 元 素 outline 效果 - 虚 框 


11.1.2 真正 的 不 占据 空间 的 outline 及 其 应 用 


outline 是 本 书 介绍 到 现在 出 现 的 第 一 个 真正 意义 上 的 不 占据 任何 
空间 的 属性 。 例 如 ， 内 联 元 素 的 上 下 padding 值 似 乎 不 占据 任何 空间 ， 
但 是 一 旦 祖先 元 素 overflow 计算 值 不 是 visible ， 同 时 padding 值 足 
够 大 ， 深 动 条 就 会 出 现 ， 上 暴露 出 “不 占据 空间 ”其 实 是 一 个 假象 。 但 
是 outline 属性 确实 不 占据 任何 空间 ， 轮 廓 宽度 设置 得 再 宽广 ， 也 不 会 
影响 任何 元 素 的 任何 布局 ， 并 且 outline 轮廓 是 可 穿 透 的 。 考 虑 
到 outline 是 一 个 从 了 下 8 开始 就 被 文 持 的 CSS 属 性 ， 这 惑 注定 J 了 outline 
要 脱离 其 设计 初衷 ， 在 其 他 方面 大 显 神通 ， 例 如 ， 用 于 实现 一 些 看 似 棘 
手 的 布局 效果 。 


1. 案例 一 : 头像 草 裁 的 和 矩形 铁 空 效果 








有 一 种 图 片 筋 裁 效 果 是 通过 移动 前 景 勇 裁 区 域 实 现 的 ， 如 图 11-4 所 
示 。 移 动 时 的 样式 如 图 11-5 所 示 。 


竟 裁 ( 仅 演 示 移 动 ) 预览 





图 11-4 ”头像 剪裁 的 铁 空 矩形 示意 





竟 裁 ( 仅 演 示 移 动 ) 








图 11-5 ”正在 移动 的 头像 剪裁 的 铁 空 窍 形 





这 种 中 间 狂 空 透 明 、 四 周 桶 层 遮 浊 的 效果 是 如 何 实现 的 呢 ? 





如 果 页 面 没 有 滚动 条 ， 倒 是 可 以 试 试 background- 
attachment:fixed 声明 ， 三 层 结构 ， 底 部 原 图 ， 中 间 遮 量 ， 最 上 面 拖 
电 元 素 ， 拖 电 元 素 背景 图 片 就 是 底部 原 图 ， 且 fixed 定位 ， 于 是 ， 当 我 
们 移动 最 上 层 元 素 时 候 ， 背 景 图 因为 不 跟随 移动 ， 给 人 感觉 就 是 “ 铂 衬 
的 ”。 











但 是 ,“ 页 面 没 有 滚动 条 ”这 个 限定 太 大 了 ， 实 际 项 目 很 难 满足 ， 
此 需要 男 寻 他 法 。 我 曾 多 次 见 到 过 这 种 做 法 ， 即 半 透 明 的 黑色 蒙 层 实际 
上 是 由 很 多 个 矩形 拼 起 来 的 ， 避 开 中 间 区 域 从 而 形成 炙 空 效果 。 这 种 做 
法 比较 符合 现实 认 知 ， 因 此 相对 比较 容易 理解 和 想到 ， 但 是 ， 在 代码 世 
界 里 ， 这 其 实 是 一 种 非常 肪 烦 的 做 法 。 








如 果 我 们 把 思维 发 散 ， 克 服 和 常态 效应 和 惯性 思维 ， 就 会 找到 很 多 非 
党 简单 的 其 他 方法 ， 例 如 这 里 要 隆重 出 场 的 outline 属性 ， 核 心 CSS 代 
人 码 如 下 : 


.Crop { 
overflow: hidden; 


} 


.Crop > .crop-area { 


width: 86px; height: 86pX; 
outline: 256px solid rgba(6,6,0,，.5); 
cursor: move; 


} 





用 一 句 话 概括 就 是 使 用 一 个 大 大 的 outline 来 实现 周围 半 透 明 黑 色 
庶 晶 。 因 为 outline 宽度 设置 再 大 ， 也 不 会 对 布局 产生 任何 影响 ， 至 于 
超出 的 区 域 ， 通 过 容器 overflow:hidden 隐藏 就 可 以 了 。 





没 错 ， 原 理 就 是 这 么 简单 。 








当然 ， 实 际 的 代码 还 有 很 多 细节 需要 考虑 ， 如 下 : 


.Crop-area { 
outline: 256px solid #6060; 
outline: 256px solid rgba(6,6,0,，.5); 
background: url(about:blank); 
background: linear-gradient(to top, transparent, transparent); 
filter: alpha(opacity=50); 
cursor: move; 


} 


:root .crop-area { 
filter: none; 


} 





首先 ，IE8 浏 览 器 不 支持 rgba 颜色 ， 因 此 这 里 借助 了 透明 度 滤 镜 进 
行 兼容 。 由 于 下 9 浏览 器 同时 支持 两 者 ， 因 此 借助 :root 进行 了 重 置 ; 
其 次 ， 包 括 正 10 在 内 的 下 浏 览 器 下 的 猴 空 元 素 会 有 点 击 穿 透 的 问题 ， 这 

里 采用 的 方法 是 使 用 background 属性 设置 看 不 见 的 背景 内 容 ， 于 是 就 
有 了 上 面 的 CSS 代 码 。 








更 完整 的 代码 和 更 切 肤 的 感受 可 以 手动 输入 地 址 
http://demo.cssworld.cn/ 111-1.php 进 行 体验 。 


2. 案例 二 : 目 动 填 满 屏幕 剩余 空间 的 应 用 技 蕊 





有 不 少 网 站 的 主 背景 是 白色 的 ， 底 部 是 深 色 的 ， 于 是 就 会 出 现 这 人 么 
个 场景 : 当主 内 容 很 少 的 时 候 ， 包 括 确 部 在 内 都 不 足 一 屏 ， 或 者 用 户 
显示 器 是 竖 屏 ， 则 很 可 能 就 会 出 现 图 11-6 所 示 的 这 样 尴 雁 的 情况 。 
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图 11-6 ”高 度 不 足 导致 底部 下 面 留 白 示意 














如 何 让 底部 背景 色 正 好 填 满 剩余 屏幕 区 域 呢 ? 目前 我 知道 的 最 好 的 
办 法 就 是 巧 用 outline 属性 。 假 设 底部 HIML 代 码 是 这 样 的 : 


<div class="footer"> 
<p>Designed &amp; Powered by zhangxinxu</p> 


</div> 








那么 就 有 如 下 CSS 示 意 代码 : 





.footer { 
height: 56pX; 


} 

.footer > pi 
position: absolute; 
left: 6j right: ©; 
text-align: center; 


padding: 15px 6; 
background-color: #a06b3d6; 
outline: 9999px solid #a6b3d6 ; 
clip: rect(6 9999px 9999px 90); 





最 关键 的 CSS 束 是 设置 一 个 超大 轮廓 范围 的 outline 属性 。 例 如 ， 





这 里 是 9999px ， 作 用 是 保证 无 论 屏幕 多 高 ， 轮 廊 色 块 也 一 定 能 够 履 


六 
UL o 


但 是 和 border 属性 不 一 样 ，outline 是 无 法 指定 方位 的 ， 只 能 被 
动 地 四 周 扩展 。 因 此 ，out1line:9999px solid #a6b3d6 不 仅 会 填 满 
底部 方位 的 屏幕 空间 ， 还 会 把 上 面 的 内 容 空 间 也 填 满 。 因 此 ， 我 们 还 需 
要 做 进一步 处 理 ， 例 如 ， 提 高 主体 内 容 的 层 车 顺序 ， 但 这 显然 成 本 太 
高 ， 效 果 也 不 一 定好 ; 还 有 就 是 采用 这 里 的 clip 剪裁 策略 ， 让 底部 内 
容 元 素 绝对 定位 ， 同 时 以 上 边缘 和 左边 缘 为 界 进行 裁剪 ， 这 样 ， 就 完全 
不 用 担心 outline 会 覆盖 上 面 的 内 容 啦 ! 代码 组 合 为 : 




















{ 


position: absolute; 


clip: rect(6 9999px 9999px 0); 





使 用 9999px 这 么 大 的 值 也 是 为 了 确保 100% 填 满 屏 莫 。 于 是 ， 此 时 
的 效果 束 成 了 如 图 11-7 所 示 的 样子 。 


¢ Css 





out line 与 底部 填 满 屏幕 的 大 面积 色 块 实例 页 面 


1 

HTML : CS55 ; 

<div cla53- foober > ‘foorer { 
<p>0estgned Sonp; Ponered by zhangxirxu</p> hetghe: Sopx; 

</div> } 


foorer > p 
position: absolute; 
Vefe; 0; right: 0; 
sext"align: center; 


clip; rect(0 9999px 99999x 0); 





图 11-7 ”底部 色 块 自动 填 满 屏幕 整 页 示意 








现在 再 也 不 用 担心 屏幕 高 度 太 高 了 ! 
11.2 ”光标 属性 cursor 


11.2.1 ”琳琅 满目 的 cursor 属性 值 


想 想 看 ， 你 平时 做 项 目 时 对 CSS 的 cursor 属性 的 使 用 ， 是 不 是 就 
是 让 按钮 链接 等 变 为 手 形 ? 类 似 这 样 : 





.button { 
cursor: pointer; 


} 





是 不 是 其 他 属性 值 都 没 怎么 使 用 ? 如 何 真 是 这 样 ， 那 可 真 就 遗憾 
了 ， 因 为 cursor 属性 要 远 比 你 想 得 丰富 与 实用 得 多 。 





cursor 属性 值 几乎 可 以 认为 是 当下 文 持 的 关键 字 属 性 值 最 多 的 


CSS 属 性 ， 没 有 之 一 。 下 面 就 是 按照 功能 特性 对 其 进行 的 分 类 以 及 具体 
解释 描述 。 


下 : 


常规 


cursor:auto : cursor 默认 值 。auto 表示 光标 形状 根据 内 容 类 别 
浏览 器 自动 进行 处 理 。 例 如 ， 输 入 框 里 面 光标 表现 为 cursor :text 
， 带 href 属性 的 链接 表现 为 cursor:pointer ， 而 原生 的 
<button> 表现 为 cursor:default 等 。 
cursor:default : 系统 默认 光标 形状 。 虽 然 有 “默认 ”之 意 ， 但 却 
不 是 cursor 属性 的 默认 值 ， 需 要 注意 。 其 大 致 长 这 个 样子 : R 。 如 
何 严格 按照 操作 系统 以 及 浏览 器 默认 的 光标 行为 呢 ? 目前 Web 页 面 
中 所 有 按钮 都 使 用 cursor : te 手 形 的 做 法 并 不 标准 ， 链 接 才 
是 手 形 ， 按 钮 应 该 都 是 默认 形 ， 通 过 hover 时 候 的 状态 变化 让 用 户 
ee Eus 
导致 业内 都 习惯 把 所 有 可 点 击 、 可 交互 的 元 素 的 光标 全 部 变 成 手 
省 
o 忘记 设置 hover 样式 或 者 不 方便 设置 ， 例 如 ， 图 标 hover 变色 
效果 ， 需 要 多 份 不 同色 背景 图 ， 尤 其 现在 都 喜欢 使 用 工具 合 
并 ， 默 认 生成 的 CSS 是 没有 hover 样式 的 ， 需 要 自己 特殊 处 
理 。 此 时 ， 如 果 这 个 图 标 按钮 及 用 默认 default 光标 ， 容 易 让 
用 户 觉 得 这 里 是 不 可 点 击 的 ， 但 是 使 用 pointer 手 形 光标 ， 由 
于 光标 变化 本 里 就 是 一 种 hover 状态 变化 ， 可 以 让 用 户 意识 到 
这 个 元 素 是 “特别 的 ”。 同 样 地 ， 反 过 来 ， 模 拟 按钮 的 禁用 效果 
的 时 候 ， 也 要 记得 把 cursor:pointer 还 原 




















成 cursor :default ， 很 多 人 都 不 注意 这 个 细 市 。 

o。 由 于 浏览 器 原生 的 按钮 样式 兼容 方面 难以 完美 ， 尤 其 在 正 感 行 
的 年 代 ， 黑 框 、 宽 高 不 一 致 等 一 系列 样式 问题 层 不 出 穷 ， 于 是 
大 家 就 使 用 <ay> 标签 来 模拟 按钮 ， 类 似 这 样 : 





<a href="javascript:" class="button"” role="button"> 按 钮 (</a> 





而 浏览 器 中 默认 带 href 属性 的 ca> 标签 的 光标 都 是 手 形 ， 而 且 这 
个 手 形 效果 也 亚 好 ， 没 有 必要 再 额外 重 置 为 default 默认 形 。 于 是 ， 久 
而 久之 ， 大 家 就 约定 俗 成 ， 所 有 和 链接 和 按钮 都 使 用 手 形 。 以 至 于 发 展 到 
现在 ， 使 用 原生 的 <button> 按钮 甚至 下 拉 框 的 时 候 ， 都 要 设置 一 
个 cursor:pointer 。 这 种 奇怪 的 发 展 史 真是 比 小 说 还 精彩 











。 cursor:none: 声明 非常 有 意思 ， 可 以 让 光标 隐藏 不 见 。 什 
么 情况 下 我 们 不 需 看 视频 的 时 候 ， 尤 其 全 屏 看 视频 的 时 
候 。 此 时 鼠标 一 直 在 界面 上 晃 着 ， 是 很 碍 眼 、 很 难受 的 。 一 般 可 以 
这 么 处 理 : 如 果 鼠 标 静 止 3 秒 不 动 ， 就 设置 页 面 或 视频 元 
素 cursor:none 隐藏 光标 ， 如 果 有 mousemove 行为 ， 再 显示 即 
可 ! 

















然而 这 样 做 有 一 个 小 问题 ， 就 是 IE8 浏 览 器 并 不 支持 cursor:none 

声明 ， 从 IE9 浏 览 右 才 开 始 文 持 这 个 属性 ， 怎 么 办 呢 ? 很 简单 ， 正 8 浏览 
器 使 用 自 定义 的 透明 光标 就 可 以 了 。 弄 一 张 纯 透明 的 PNG 图 片 ， 然 后 制 
作成 cur 格式 ， 就 可 以 实现 全 部 浏览 器 下 的 光标 隐藏 效果 了 。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/11/2-1.php。 


CSS 代 码 如 下 : 


.Cur-none { 
cursor: url(transparent.cur), auto; 


:root .cur-none { 
cursor: none; 





:root 是 IE9 及 以 上 版 本 浏览 器 才 认 识 的 选择 器 ， 因 此 可 以 把 IE8 和 
其 他 浏览 器 区 分 开 。 


2. 链接 和 状态 


。 cursor:pointer : 光标 表现 为 一 只 伸 出 食指 的 手 ， 类 似 这 样 : 由 
。 正 浏览 器 还 支持 cursor:hand ， 表 现 和 cursor:pointer 是 一 样 
的 ， 但 其 他 浏览 器 并 不 识别 ， 因 此 没有 任何 使 用 cursor:hand 的 
理由 。 我 以 前 其 实 产生 过 疑问 : 为 何 “ 手 形 ” 不 统一 是 cursor :hand 
? 这 样 通俗 易 懂 又 好 记 。 后 来 算是 明白 了 ，hand 这 个 词 太 概括 和 
短 统 ， 随 着 CSS 发 展 ， 一 定 会 出 现 其 他 与 手相 关 的 形状 ， 例 如 ， 
抓 取 相关 的 grab 和 grabbing 等 。 

。 cursor:help : 帮助 ， 通 常 是 光标 头 上 带 了 个 问号 ， 类 似 这 样 : & 
。 它 用 在 帮助 链接 或 者 包含 提示 信息 的 问号 小 图 标 上 。 目 前 ， 类 似 
场景 几乎 都 使 用 cursor:pointer 手 形 ， 实 际 上 ， 可 以 试 试 使 
用 cursor:help ， 让 我 们 的 交互 细节 和 视觉 呈现 更 加 细腻 ， 让 用 
户 感受 到 我 们 在 产品 上 的 用 心 。 

。 cursor:progress : 表示 进行 中 的 意思 。 从 语义 上 讲 ， 其 适 
合 loading 处 理 。 例 如 ， 我 们 点 击 一 个 按钮 发 送 请 求 ， 请 求 发 送出 








去 、 返 回 数据 还 没 接收 到 的 这 段 时间 其 实 就 是 一 个 progress 状 
态 。 按 道理 讲 ， 可 以 让 按钮 的 光标 变 成 cursor :progress ， 例 
如 ，Windows 7 系统 下 的 只 会 有 一 个 不 停 旋转 的 圈 圈 。 但 是 我 个 人 
更 建议 对 按钮 本 身 的 样子 进行 改变 ， 例 如 ， 加 个 菊花 加 载 效果 ， 让 
用 户 感知 到 目前 正在 处 理 中 ， 因 为 用 户 的 交互 操作 不 一 定 通 过 忆 
标 ， 也 有 可 能 通过 键盘 ， 如 果 单 纯 使 用 cursor:progress ， 通 过 
键 副 操作 的 用 户 束 无 法 感知 到 状态 的 变化 ， 用 户 体验 其 实 是 不 好 
的 。 


但 是 ， 有 一 个 场景 却 非常 适合 使 用 cursor:progress ， 那 就 是 页 
面 加 载 的 时 候 。 如 今 进 行 Web 开 发 ， 没 有 JavaScript 几 乎 寸步 难 行 ， 而 
JavaScript 加 载 完毕 是 需要 一 定时 间 的 ， 网 络 不 好 的 时 候 ， 这 个 加 载 时 间 
延迟 可 能 会 非常 明显 ， 于 是 用 户 就 会 遇 到 明明 界面 已 经 呈现 了 ， 但 是 点 
击 “ 展 开 更 多 ”按钮 却 没 有 任何 反应 ， 原 因 束 是 JavaScript 还 没有 完全 加 载 
完毕 。 此 时 就 非常 适合 cursor:progress 出 马 了 ， 我 们 默认 在 <body> 
标签 上 设置 : 


body { 
cursor:progress 
} 


然后 ， 当 JavaScript 初 始 化 完毕 的 时 候 ， 执 行 类 似 下 面 的 JavaScript 
代码 : 


document .body.style.cursor = "auto'; 


于 是 ， 刚 才 的 加 载 场 景 就 变 成 了 这 样 : Web 页 面 界 面 已 经 呈现 ， 用 














户 想 去 点 击 “ 展 开 更 多 ”按钮 ， 结 果 发 现 此 时 页 面 的 光标 

是 cursor:progress 的 转圈 圈 状 态 ， 此 时 ， 至 少 大 部 分 用 户 会 意识 到 
我 们 的 网 页 还 没有 完全 加 载 完毕 ， 需 要 再 耐心 等 待 一 会 儿 ， 减 少 了 点 
击 “ 展 开 更 多 ”按钮 却 没 有 任何 反应 的 不 安 和 焦虑 感 ， 对 用 户 更 加 友好 
ee 


。 cursor:wait : 我 们 先 看 看 光标 形状 ， 可 能 是 o 这 样 的 转圈 图 ， 
或 者 是 沙漏 或 者 是 表 ， 总 之 和 电脑 死机 时 候 的 光标 是 一 样 的 。 
此 ， 请 不 要 在 Web 开 发 的 时 候 使 用 cursor:wait 光标 ， 以 免 引 起 用 
户 不 必要 的 恐慌 。 就 算 真 的 不 响应 了 ， 浏 览 器 自己 也 会 处 理 ， 我 们 
无 须 多 此 一 举 。 

。 cursor:context-menu : cursor:context-menu 兼容 性 比较 复杂 ， 
Mac OS X 和 Linux 系 统 下 的 Chrome 和 Firefox 浏 览 器 是 支持 的 ， 但 是 
Windows 系 统 下 的 Chrome 和 Firefox 浏 览 器 却 不 支持 。 











在 Windows 7 系统 下 ， 表 现 为 第 头 光 标 右 下 方 挂 了 个 汽油 桶 ss 。 





context-menu 的 字面 意思 是 “上 下 文 菜 单 ，， 就 是 右键 点 击 我 们 的 
加 面 或 者 网 页 显示 的 那个 瑟 蛙 列表 。 如 果 套 用 这 个 语 
义 ，cursor:context- menu 适用 的 场景 是 自 定 义 “ 上 下 文 菜单 ”的 时 
候 ， 例 如 ， 网 盘 列 表 或 者 邮箱 列表 ， 我 们 可 以 直接 右键 删除 ， 如 图 11-8 
所 示 。 


今天 (1 封 
= S 深 入 
-4 内 二 »、 Es 
昨天 (4 封 ) 新 窗口 打开 
园 SA 5 


星期 二 (者) 这 旦 坊 声 由 人 





图 11-8 邮箱 列表 右键 自 定 义 上 下 文 沫 单 示 意 











此 时 ， 如 果 我 们 把 光标 设置 为 cursor:context-menu ， 用 户 就 更 
容易 意识 到 这 里 有 上 自 定 义 的 、 快 捷 方 便 的 上 下 文 菜单 功能 ， 而 不 是 傻 傻 
指望 用 户 上 自己 发 现 。 
3. 选择 


。 cursor:text : 潜台词 是 文字 可 被 选中 ， 形 状 类 似 1 。 默 认 文 本 字 
符 或 者 可 输入 的 单 复 选 框 的 光标 就 表现 成 这 样 ， 因 为 文字 可 以 被 选 
中 ; 有 反 过 来 ， 如 果 文 字 是 不 能 被 选中 的 ， 光 标 就 不 应 该 


是 cursor:text 。 


举 个 例子 ， 单 行 输入 框 ， 默 认 光 标 表现 为 cursor:text ， 但 是 我 
们 一 旦 让 其 disabled 禁用 ， 如 <input disabled> ， 则 浏览 器 自动 会 
把 光标 改变 成 cursor :default ， 如 图 11-9 所 示 。 


R 


图 11-9 ”输入 框 禁 用 时 的 光标 示意 








同样 地 ， 如 果 我 们 使 用 CSS 让 页 面 上 的 文本 字符 不 能 被 选中 ， 则 光 
标 也 要 跟着 一 起 发 生变 化 ，CSS 代 码 如 下 : 





article { 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 


cursor: default; 


user-select:none 声明 可 以 让 现代 浏览 器 下 的 文本 不 能 被 选中 ， 
这 个 很 多 人 都 知道 ， 但 是 这 些 人 却 没 注意 到 要 设置 cursor:default ， 
因为 设置 了 user-select:none 的 文本 其 光标 依然 表现 为 cursor :text 
， 显 然 语义 和 表现 就 不 符合 了 ， 明 明 呈 现 的 是 可 选中 文本 的 光标 ， 结 果 
文本 却 选 不 了 。 因 此 不 要 忘记 顺便 加 个 cursor:default 。 





。 cursor:vertical-text : 潜台词 是 文字 可 以 垂直 选中 ， 形 状 类 
似 一 。 当 我 们 使 用 writing-mode 把 文字 排版 从 水 平 改 为 垂直 的 时 
候 ， 文 字 的 光标 就 目 动 表现 为 cursor:vertical-text 。 换 句 话 
说 ，cursor:vertical-text 就 是 给 垂直 文字 排 板 用 的 ， 平 常 的 
项 目 开 发 很 难 有 机 会 用 到 。 

。 cursor:crosshair : 十 字 光 标 ， 形 状 类 似 + 。 它 通常 用 在 像素 级 
的 框 选 或 点 选 场合 ， 比 方 说 自 定义 的 取 色 工具 ， 如 图 11-10 所 示 。 

。 cursor:cell : cursor:cell 中 的 cell 和 display:table-cell 中 的 
cell 其 实 可 以 看 成 是 同一 个 东西 ， 也 就 是 单元 格 。 换 句 话 
说 ，cursor:cell 用 来 表示 单元 格 是 可 以 框 选 的 ， 形 状 类 似 中 。 有 
没有 觉得 很 眼熟 ? 没 错 ， 此 光标 为 Excel“ 御 用 ”光标 ， 如 图 11-11 所 
示 。 
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图 11-10 取 色 工具 使 用 十 字 光 标点 选 颜色 示意 
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图 11-11 Excel 中 的 cursor:cell 光标 





这 下 大 家 应 该 就 知道 cursor:cell 适合 在 哪 种 场景 下 使 用 了 吧 ! 


原生 的 IE8 浏 览 器 并 不 支持 cursor:cell ， 若 使 用 ，IE8 需 要 上 自 定 
VY 
4. 拖 电 








。 cursor:move : 光标 变 成 cursor :move， 往往 就 意味 着 当前 元 素 
是 可 以 移动 的 ， 形 状 类 似 令 。 例 如 ， 头 像 剪 裁 的 时 候 可 能 需要 拖 动 
剪裁 框 或 背景 图 ， 就 可 以 设置 cursor :move ， 或 者 有 些 弹 框 组 件 
按 住 标题 栏 是 可 以 拖 电 的 ， 我 们 就 可 以 在 标题 栏 上 设 
置 cursor:move ， 让 用 户 很 直观 地 知道 当前 弹 框 是 可 拖 上 忠 的 ， 降 
低 用 户 的 学 习 成 本 ， 还 是 很 有 使 用 价值 的 。 

。 cursor:copy : 光标 变 成 cursor:copy， 人 往往 就 意味 着 当前 元 素 
是 可 以 被 复制 的 ， 形 状 类 似 * 。 原 生 的 IE8 浏 览 器 并 不 支持 ， 若 使 
用 ，IE8 需 要 自 定义 。 

。 cursor:alias : 光标 变 成 cursor:alias， 往往 就 意味 着 当前 元 
素 是 可 以 创建 别名 或 者 快捷 方式 的 ， 形 状 类 似 * 。 原 生 的 I 下 8 浏览 占 
并 不 支持 ， 若 使 用 ，IE8 需 要 自 定义 。 

。 cursor:no-drop : 光标 变 成 cursor :no-drop， 往往 就 意味 着 当 
前 元 素 放 开 到 当前 位 置 是 不 允许 的 。 如 果 深 究 其 光标 表现 ， 应 该 类 
似 如 图 11-12 所 示 这 般 。 但 实际 上 ， 浏 览 器 的 真实 表现 是 和 




















cursor:not-allowed 一 模 一 样 的 。 

。 cursor:not-allowed : 光标 变 成 cursor:not-allowed， 人 往往 
就 意味 着 当前 行为 是 禁止 的 ， 形 状 类 似 S 。 有 一 些 人 会 给 禁用 态 按 
钮 设置 cursor:not-allowed ， 其 本 身 出 发 点 是 好 的 ， 表 示 当 前 按 
钮 禁止 访问 《不 允许 点 击 ) ， 似 乎 也 说 得 通 ， 但 其 实 是 不 合适 的 ， 
因为 cursor:not-allowed 并 不 是 第 规 光标 状态 ， 而 是 与 拖 上 忠 行为 
相关 的 ， 它 应 该 是 一 种 主动 行为 下 的 光标 表现 。 例 如 ，Chrome 浏 
哆 占 下 ， 我 们 在 网 页 上 拖 上 忠 一 张 图 片 ， 其 光标 表现 如 图 11-13 所 
示 。 因 此 ， 禁 用 按钮 光标 还 是 使 用 cursor: default 更 合适 ， 然 
后 通过 样式 变化 让 用 户 一 眼 就 看 得 出 来 现在 按钮 是 不 可 点 击 的 。 
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图 11-12 系统 自 带 的 drop 无 效 光 标示 意 





图 11-13 Chrome 浏览 器 下 图 片 拖 上 忠 无 效 时 的 光标 表现 


5. 滚动 





。cursor:all-scroll : 表示 上 下 左右 都 可 以 滚动 ， 但 有 一 个 很 粳 
糕 的 问题 : Windows 系 统 下 光标 表现 和 cursor :move 一 样 。 再 考虑 


到 本 身 作 用 场景 局 限 ， 我 觉得 可 以 忽略 此 声明 。 
6. 拉 伸 


。 cursor:col-resize : 光标 形状 类 似 中 。 它 适用 于 移动 垂直 线 
条 ， 如 垂直 参考 线 。 如 果 要 通过 移动 改变 左右 分 栏 的 宽度 ， 建 议 使 
用 cursor:ew-resize 。 

。 cursor:row-resize : 光标 形状 类 似 # 。 它 适用 于 移动 水 平 线 
条 ， 如 水 平 参考 线 。 如 果 要 通过 移动 改变 上 下 分 栏 的 高 度 ， 建 议 使 


用 cursor:ns-Fresize 。 


(1) 单 向 拉 伸 : 总 共 8 个 方位 8 个 不 同 的 关键 字 属 性 值 ， 名 称 和 近 
似 形 状 如 下 。 


。 cursor:n-resize ， 理 应 是 一 个 绩 上 的 单 箭头 ， 但 通常 是 双 辐 的 


表现 1 。 

。 cursor:e-resize ， 理 应 是 一 个 朝 右 的 单 箭头 ， 但 通常 是 双 回 的 
表现 = 。 

。 cursor:s-resize ， 理 应 是 一 个 朝 下 的 单 第 涉 ， 但 通常 是 双 同 的 
表现 1 。 

。 cursor:w-resize ， 理 应 是 一 个 朝 左 的 单 箭头 ， 但 通常 是 双 回 的 
表现 ~ 。 

。 cursor:ne-resize ， 理 应 是 一 个 绷 右 上 角 的 单 箭头 ， 但 通常 是 双 
向 的 表现 = 

。 cursor:nw-resize ， 理 应 是 一 个 朝 左 上 角 的 单 稍 头 ， 但 通 音 是 双 
向 的 表现 * 。 


。 cursor:se-resize ， 理 应 是 一 个 绷 右 下 角 的 单 箭头 ， 但 通 稼 是 双 


向 的 表现 。 。 
。 cursor:sw-resize ， 理 应 是 一 个 朝 左 下 和 角 的 单 第 涉 ， 但 通常 是 双 
向 的 表现 2 。 


(2) 双向 拉 伸 : 总 共 4 个 对 立方 位 组 合 ， 名 称 和 近似 形状 如 下 。 





e Cursor:ew-resize: ~。 
e cursor:ns-resize: 1 。 
e cursor:nesw-resize.: 


e cursor:nwse-resize.: 


双 同 拉 伸 的 4 个 属性 值 从 IE10 才 开始 支持 。 考 虑 到 时 向 拉 伸 往往 会 
目 动 以 双向 的 形式 呈现 ， 因 此 ， 实 际 开发 的 时 候 ， 我 们 大 可 这 么 处 理 ， 
拿 右 下 角 拉 伸 示 意 : 

.resize { 


CuUrsor. se-resize; 
CuUrsor. nwse-resize; 


} 





这 样 ， 即 使 有 些 环境 单 向 拉 伸 就 只 有 一 个 方向 的 第 头 ， 有 后 面 的 
cursor:nwse-resize 日 着 ， 也 不 会 出 现 什么 明显 的 样式 问题 。 


7. 缩放 


。 cursor:zoom-in : 光标 形似 放大 镜 & 。 
。 cursor:zoom-out : 光标 形似 缩小 镜 。 


这 是 CSS3 新 文 持 的 两 个 光标 类 型 。 


8. 抓 取 


cursor:grab : 光标 是 一 个 五 指 张 开 的 手中 。 
cursor:grabbing : 光标 是 一 个 五 指 收 起 的 手 @ 。 


这 也 是 CSS3 新 文 持 的 两 个 光标 类 型 。 


或 许 是 因为 操作 系统 并 不 存在 这 样 的 光标 类 型 ， 不 同 浏览 器 下 这 


个 “五 指 张 开 / 收 起 的 手 ” 的 形状 还 是 有 些 兰 异 的， 而 其 他 比较 传统 的 光标 
则 完全 一 致 ， 并 且 都 和 操作 系统 的 光标 一 模 一 样 。 


最 后 ， 再 总 结 一 下 琳琅 满目 的 cursor 属性 值 的 兼容 性 情况 〈 数 据 


源 自 caniuse.com ) 。 


可 以 放心 使 用 ， 无 须 担 心 兼容 性 问题 的 cursor 属性 值 有 auto、 
crosshair、 default、move、text、wait、help、n-resize、 
e-resize、s-resize、w-resize、ne-resize、nw-resize、 
se-resize、sw-resize、pointer、progress、not-allowed、 
no-drop、vertical-text、all-scroll、col-resize 和 row- 
resize。 

从 IE9 浏 览 器 才 开 始 支 持 的 属性 值 有 none、alias、cell、copy、 
ew-resize、ns-resize、nesw-resize、nwse-resize 利 
context-menu 。 

从 Edge12 才 开始 支持 的 属性 值 有 zoom-in 和 zoon-out 。 

从 Edge14 才 开始 支持 的 属性 值 有 grab 和 grabbing ( 源 自 MDN 文 
档 ) 。 


11.2.2 ” 自 定 义 光 标 

从 IE6 开 始 ， 我 们 就 可 以 自 定义 网 页 中 的 光标 样式 ， 因 此 ， 对 于 
cursor 属性 ， 兼 窑 性 都 不 是 问题 。 例 如 ，IE8 不 支持 上 面 提 到 的 
cursor:none ， 就 是 通过 自 定义 手段 实现 兼容 的 : 


.CuUr-none { 
cursor: url(transparent.cur); 
} 


对 于 Chrome 等 浏览 器 ， 可 以 直接 使 用 PNG 图 片 作为 光标 ， 但 是 下 浏 
览 句 不 行 。 正 仅 文 持 专 门 的 .cur 格式 的 光标 文件 ， 需 要 使 用 工具 进行 
格式 转换 ， 至 于 什么 工具 ， 大 家 可 以 自行 搜索 一 下 ， 还 是 有 很 多 的 。 











解决 兼容 性 问题 只 是 自 定义 光标 的 作用 之 一 ， 自 定义 光标 最 大 的 作 
用 其 实 是 根据 业务 需要 对 光标 进行 更 为 彻底 的 自 定 义 ， 最 常见 的 就 是 点 
击 图 片 左右 半 区 ， 分 别 实现 上 一 张 、 下 一 张 图 片 切 换 预 哆 的 效果 ， 如 图 
11-14 所 示 。 














图 11-14 和 上 自 定义 光标 在 图 片 预 响 交互 中 的 应 用 示意 








自 定 义 光 标 很 实用 ， 但 要 讲解 的 知识 点 不 多 ， 就 不 过 多 展开 了 。 


第 12 章 ” 流 癌 的 改变 





在 现实 世界 中 ， 太 阳 总 是 东升 西 落 ， 水 总 是 从 高 往 低 流 ， 这 似乎 就 
征 永恒 不 变 的 规律 。 人 在 理解 抽象 知识 的 时 候 习 惯 与 现实 世界 相映 射 ， 

会 有 人 认为 CSS 世 界 中 的 内 容 自 左 往 右 、 自 上 而 下 排列 也 是 永恒 不 
变 的 。 实 际 上 ，CSS 世 界 流 癌 是 可 以 轻易 进行 题 获 和 改变 的 。 











12.1 改变 水 平流 向 的 direction 


至 少 在 我 接触 的 这 么 多 项 目 里 ， 没 有 见 到 有 谁 使 用 过 CSS 的 
direction 属性 。 


为 什么 呢 ? 是 因为 direction 长 得 丑 吗 ? 虽然 说 direction 确实 
其 貌 不 扬 ， 但 是 CSS 世 界 不 会 有 这 样 的 歧视 。 





那 是 因为 兼容 性 吗 ? 更 不 是 了 ，direction 早 在 IE6 时 代 就 已 经 被 
文 持 了， 其 兼容 性 见 表 12-1。 





表 12-1 direction 属性 兼容 性 


om 











那 完 竟 是 什么 原因 呢 ? 


我 认为 多 半 是 因为 宣传 不 够 。 要 是 所 有 前 端 人 能 够 人 手 一 本 这 本 
书 ， 目 然 就 不 会 有 这 样 的 问题 了 ， 因 为 本 书 热衷 于 挖掘 CSS 属 性 的 湾 
力 ， 可 以 让 那些 默默 无 闻 但 有 能 力 的 CSS 属 性 烧烤 生 瘤 、 焕 发 青 
春 。direction 惑 是 一 个 典型 ， 该 属性 简单 且 好 记 ， 属 性 值 少 ， 兼 容 性 
好 ， 关 键 时 候 省 心 省 力 。 


12.1.1 direction 简介 





基本 上 ， 大 家 只 要 关心 下 面 这 两 个 属性 值 就 好 了 : 





direction: ltr; // # 


direction: rtl; 








其 中 ，1ltr 是 初始 值 ， 表 示 leftrto-right， 就 是 从 左 往 右 的 意思 。 目 前 东 
亚 以 及 欧美 文字 书写 就 是 从 左 往 右 的 ; rt1 表示 right-to-left， 就 是 从 石 
往 左 的 意思 。 阿 拉 伯 语 〈Arabic) 、 希 伯 来 语 (Hebrew)〉 等 的 书写 就 是 
从 右 往 左 的 ， 也 就 是 说 ，direction 设计 的 本 意 其 实 是 为 了 兼顾 这 类 话 
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但 是 ，Web 开 发 接触 多 语言 的 场景 其 实 非常 有 限 ， 但 这 其 实 并 不 妨 
人 碍 direction 属性 在 实际 项 目 中 的 应 用 ， 因 为 direction 改变 水 平流 
回 的 特性 在 网 页 布局 的 时 候 非 常 有 用 。 











direction 属性 默认 有 这 么 一 个 特性 ， 即 可 以 改变 蔡 换 元 素 或 
者 inline-block/ inline-table 元 素 的 水 平 呈现 顺序 。 举 个 例子 ， 
使 用 如 下 HTML: 





<p dir="rtl"> 
<img src="1.jpg" alt=" 美 女 "> 


<img src="2.jpg”alt=" 美 景 "> 
</p> 





美女 图 片 DOM 市 点 在 美景 图 片 的 前 面 ， 如 果 我 们 忽略 父 级 元 素 ， 是 不 
是 页 面 呈 现 的 时 候 应 该 美女 图 片 在 前 面 ， 美 景 图 片 在 后 面 ? 但 是 这 里 呈 
现 的 顺序 却 是 反 的 ， 美 景 图 片 显 示 在 了 美女 图 片 的 前 面 ， 如 图 12-1 所 

示 。 








眼见 为 实 ， 手 动 输入 http:/demo.cssworld.cn/12/1-1.php 或 者 扫 下 面 
的 二 维 码 。 





图 12-1 direction:rt1l 下 的 图 片 呈 现 顺序 


这 种 特性 表现 对 我 们 实际 开发 有 什么 作用 呢 ? 作用 就 是 我 们 可 以 兵 





不 血 为 地 改变 元 素 的 水 平 呈现 顺序 。 举 个 例子 ， 我 们 要 写 一 球 confirm 
确认 框 组 件 ， 需 要 同时 兼容 桌面 端 和 移动 端 。 在 桌面 端 呈现 的 时 

候 , “确认 ”按钮 是 在 左边 , “取消 ?按钮 是 在 右边 ， 如 网 12-2 所 示 。 如 果 
移动 端 访问 ， 为 了 我 们 手指 点 击 方便 ， 产 品 经 理 希 望 “ 确 认 ” 按 钮 在 右 
边 ， 而 “取消 ”按钮 在 左边 ， 如 图 12-3 所 示 。 











图 12-2 桌面 端 





图 12-3 ”移动 端 


请 问 : 如 果 你 来 实现 ， 你 会 如 何 处 理 这 种 不 同 设备 、 不 同 按钮 顺序 
的 问题 呢 ? 


如 果 按 钮 右 对 齐 ， 我 们 还 可 以 使 用 浮动 float :right 来 解决 ， 但 
征 现 在 的 关键 问题 是 按钮 是 居中 对 齐 的 ， 别 说 浮动 了 ， 飞 动 都 满足 不 了 





需求 。 一 秋思 考 后 ， 你 发 现 没 什么 思路 ， 是 不 是 又 会 去 求助 万 能 的 
JavaScript， 根 据 设备 改变 按钮 元 素 在 DOM 流 中 的 顺序 了 ? 


别 瞎 折腾 啦 ! 有 请 名 不 见 经 传 的 direction 属性 出 场 ! 直接 一 
行 direction:rtl ， 十 几 个 字母 ， 按 钮 顺序 就 会 自动 反 转 ， 兼 容 性 
好 ， 代 码 又 少 ， 我 敢 打包 票 ， 这 一 定 是 性 价 比 最 高 的 方法 ! 


@media screen and (max-width: 486px) { 
.dialog-footer { direction: rtl; } 


} 





当然 ，direction 属性 的 作用 远 不 止 这 些 。 通 常 ， 我 们 让 单行 文字 
溢出 用 点 显示 ， 这 个 点 通常 都 是 在 右边 的 ， 省 略 的 都 是 最 后 的 文字 ， 配 
合 direction 属性 ， 我 们 可 以 让 这 个 点 打 在 开头 ， 让 前 面 的 文字 省 略 ， 
CSS 和 HTML 代 码 如 下 : 





.ell { 
width: 2468px; 
white-space: nowrap; 
text-overflow: ellipsis; 
overflow: hidden; 


} 
<p class="ell"” dir="1ltr"> 开 头 是 我 ， 这 是 中 间 ， 然 后 就 是 结束 </p> 
<p class="el1" dir="rt1l"> 开 头 是 我 ， 这 是 中 间 ， 然 后 就 是 结束 </p> 









































HTML 代 码 中 的 dir 属性 和 CSS 中 direction 属性 作用 一 样 ， 使 用 
HTML 属 性 是 为 了 方便 测试 。 效 果 如 图 12-4 所 示 。 眼 见 为 实 ， 手 动 输入 
http://demo.cssworld.cn/12/1-2.php 或 者 扫 下 面 的 二 维 码 。 








图 12-4 不同 direction 属性 值 下 的 文字 淤 出 打点 效果 


这 种 开头 打点 的 效果 在 有 些 场合 非常 有 用 。 比 方 说 ， 我 们 的 动态 文 
字 后 面 跟 了 一 些 标记 性 的 图 标 ， 如 果 后 面 打点 ， 就 很 容易 把 这 些 需要 呈 
现 的 图 标 一 并 变 成 点 ， 于 是 我 们 不 得 不 给 文字 套 一 层 标签 并 借助 max- 
width 来 只 让 文字 打点 ， 那 可 是 相当 麻烦 的 。 但 有 了 direction 属性 ， 
有 了 前 置 打点 ， 事 情 束 简单 多 了 ， 只 要 配合 text-align:1eft 控制 
下 ， 就 完全 不 用 担心 后 面 的 标记 性 的 图 标 会 被 隐藏 抒 啦 ! 











direction 属性 还 可 以 轻松 改变 表格 中 列 的 呈现 顺序 。 例 如 ， 我 们 
对 表 12-1 设 置 一 个 direction:rtl ， 就 会 变 成 表 12-2 所 示 的 这 样 ， 原 本 
第 一 列 的 Chrome 跑 到 最 后 了 。 








表 12-2 改变 了 direction 属性 值 后 的 CSS direction 属性 


ee es 

















3.1+ “| 任意 版 本 5.5+ | 9.2+ 任意 版 本 1.3+ 2.0+ 











directionL:rtl 还 可 以 让 text-justify 两 端 对 齐 元 素 ， 最 后 一 
行 落 单 的 元 系 右 对 齐 显 示 。 例 如 ， 使 用 下 面 的 CSS 和 HTML: 





pi 
text-align: justify; 
direction: rtl; 
} 
<p> 
<img src="1.jpg"> 
<img src="1.jpg"> 
<img src="1.jpg"> 
</p> 








结果 如 图 12-5 所 示 。 眼 见 为 实 ， 手 动 输入 
http:/demo.cssworld.cn/12/1-3.php 或 者 扫 下 面 的 二 维 码 。 








图 12-5 ”direction:rtl 时 text-justify 最 后 一 行 右 对 齐 


只 要 是 内 联 元 素 ， 只 要 与 书写 流 相 关 ， 都 可 以 试 试 direction 属 


对 了 ， 还 有 一 个 小 点 值得 一 提 。 在 不 文 持 text-align:start/end 
的 浏览 器 中 《〈 如 IE) ， 不 同 的 direction 属性 值 会 改变 text-align 属 
性 的 初始 值 : 当 direction 值 为 ltr 的 时 候 ，text-align 的 初始 值 
是 left ; 当 direction 值 为 rtl 的 时 候 ，text-align 的 初始 值 
是 right 。 

12.1.2 direction 的 黄金 搭档 unicode-bidi 

细心 的 读者 可 能 注意 到 了 ， direction 属性 似乎 只 能 改变 图 片 或 

者 按钮 的 呈现 顺序 ， 但 对 纯 字 符 内 容 (尤其 中 文 ) 好 像 并 没有 什么 效 


果 ， 但 实际 上 ， 我 们 也 是 可 以 指定 中 文 每 个 字符 都 反问 呈现 的 ， 方 法 就 
是 借助 direction 的 搭档 属性 unicode-bidi 。 





单 看 unicode-bidi 的 名 称 ， 你 可 能 会 觉得 有 点 儿 怪 ， 会 觉得 它 可 
能 是 哪个 浏览 器 私有 的 属性 ， 实 际 上 不 是 的 ，unicode-bidi 是 一 个 所 
有 浏览 器 都 支持 的 良好 的 CSS 属 性 。 至 于 它 为 什么 会 有 这 么 奇怪 的 名 





称 ， 我 这 里 解释 一 下 ， 你 可 以 把 unicode 理解 为 “字符 集 *， 而 bidi 则 
是 单词 bidirectionality 的 人 简写， 中 文 意思 是 “ 双 同 性 ”"。 网 页 中 的 字 
符 很 多 时 候 是 混合 的 ， 例 如 中 文 和 英文 夹杂 ， 或 者 阿拉 伯 文 和 英文 夹 
杂 ， 此 时 就 会 出 现 文 本 阅读 方向 不 一 样 的 情况 ， 阿 拉 伯 文 是 从 右 往 左 
读 ， 英 文 是 从 左 往 右 ， 而 这 种 混合 方向 同时 出 现 的 现象 就 称 为 “双向 
性 ?， 因 此 unicode-bidi 作用 就 是 明确 字符 出 现 “ 双 向 性 ?时 应 当 有 的 表 
现 。 

















unicode-bidi 兼容 性 比较 好 的 几 个 属性 值 如 下 : 


unicode-bidi: normal; // 默认 值 
unicode-bidi: embed; 





unicode-bidi: bidi-override; 





现 有 的 对 unicode-bidi 这 几 个 属性 值 的 解释 几乎 都 是 星 深 难 懂 
的 ， 我 在 这 里 给 出 一 个 通俗 易 懂 的 解释 。 


(1) normal : 正常 排列 。 假 设 设置 了 direction:rtl， 则 图 
片 、 按 钮 以 及 问号 、 加 号 之 类 的 字符 会 从 右 往 左 显示 ， 但 是 中 文 、 现 文 
字符 还 是 从 左 往 右 显示 。 








(2) embed : embed 属性 值 要 想起 作用 ， 只 能 作用 在 内 联 元 素 
上 。 在 通常 情况 下 ，embed 属性 值 的 表现 和 normal 是 一 样 的 ， 导 致 很 
多 人 不 明白 embed 到 底 和 normal 有 什么 区 别 。 其 实 它们 的 区 别 很 简 
单 ，embed 属性 值 的 字符 排序 是 独立 内 和 藤 的 ， 不 受 外 部 影响 。 我 们 来 看 
一 个 例子 ，CSS 和 HTML 如 下 : 


.Ptl { 


direction: rt1; 
unicode-bidi: bidi-override; 


.Ptl > span { 
background-color: #ddd; 

} 

<p class="rt1"> 开 头 是 我 ，<span style="unicode-bidi:normal;"> 这 是 中 间 </span> 

， 然 后 是 结束 </p> 














DE 





<p class="rt1"> 开 头 是 我 ，<span style="unicode-bidi:embed;"> 这 是 中 间 </span>， 
然后 是 结束 </p> 





结果 如 图 12-6 所 示 。 
unicode -bidi:normal 
束 结 是 后 然 ， 间 中 是 这 ， 我 是 头 开 


束 结 是 后 然 ， 这 是 中 间 ， 我 是 头 开 


六 


unicode il 


图 12-6 unicode-bidi:embed 和 unicode-bidi:normal 对 比 





因为 <p> 元 素 设 置 了 unicode-bidi:bidi-override ， 所 以 会 强 
制 所 有 字符 按照 direction 设置 的 方向 全 部 反 回 排列 。 但 是 从 图 12-6 可 
以 看 出 ， 设 置 了 unicode- bidi:normal 的 <span> 元 素 直 接受 外 部 的 
unicode-bidi 属性 影响 ， 也 全 部 反 向 呈现 了 ， 但 是 下 一 行 设置 了 
unicode-bidi:embed 的 “这 是 中 间 ” 四 个 字 反 而 是 “normal ”排序 。 


原因 就 在 于 ，unicode-bidi:embed 会 开启 一 个 看 不 见 的 藤 入 层 ， 
然后 自己 在 里 面 重新 排序 ， 但 unicode-bidi:normal 并 不 会 开启 一 个 
额外 的 众 入 层 ， 于 是 总 是 受 外 部 的 unicode-bidi 影响 。 








这 一 对 比 效果 有 对 应 的 实例 页 面 ， 有 兴趣 的 读者 可 手动 输入 
http://demo. cssworld.cn/12/1-4.php 或 者 扫 右 侧 的 二 维 码 。 











embed 属性 值 的 作用 原理 是 在 元 素 的 开始 和 结束 位 置 插入 特殊 字符 
加 以 实现 的 ， 可 以 理解 为 在 元 素 开 始 位 置 添加 了 一 个 U+282A 字符 (如 
果 direction 值 是 Itr ) 或 者 U+262B 字符 (如 果 direction 值 是 rt1 
) ， 并 在 该 元 素 结束 位 置 添 加 了 一 个 U+262C 字符 。 


因此 ， 实 际 上 我 们 无 须 设 置 unicode-bidi:embed ， 直 接 
在 <span> 元 素 前 后 分 别 插入 U+262B 字符 和 U+262C 字符 也 可 以 实现 类 
似 的 效果 。 有 具体 如 下 : 




















<p class="rt1"> 开 头 是 我 ，<span>&#Xx262B; 这 是 中 间 &#Xx262C;</span>， 然 后 是 





本 人 杀 测 有 效 。 





(3) bidi-override : 顾名思义 ，bidi-override 就 是 “ 重 写 双 
问 排序 规则 ”， 通 和 常 样式 表现 为 所 有 的 字符 都 按照 统一 的 direction 顺 





序 排列 ， 例 如 ， 若 设置 direction:rtl ， 则 所 有 字符 都 会 从 右 往 左 反 
回 排 列 ， 效 果 强 烈 。 


bidi-override 的 作用 原理 也 是 通过 插入 特殊 字符 实现 的 ， 可 以 
理解 为 在 元 素 开始 位 置 或 者 每 个 匿名 子 级 块 盒 的 开始 位 置 (如 果 有 的 
话 ) 添加 一 个 U+262D 字符 (如 果 direction 值 是 Itr ) 或 者 U+262E 字 
符 ( 如 果 direction 值 是 Prt1 ) ， 并 在 该 元 素 结束 位 置 添加 了 一 
个 U+262C 字符 。 


因此 ， 实 际 上 我 们 无 须 设置 unicode-bidi:bidi-override 以 及 
direction 属性 ， 直 接 在 元 素 前 后 分 别 插入 U+262E 字符 和 U+262C 字 
符 ( 可 缺 省 ) 也 可 以 实现 字符 反 向 排列 效果 。 例 如 : 


<p>&#x282E ;一 二 三 四 五 六 七 八 九 十 </p> 


最 后 页 面 呈 现 的 文字 就 是 “十 九 八 七 六 五 四 三 二 一 ”， 还 是 挺 有 巧 思 的 。 





规 en 一 句 话 很 有 意思 : Unicode 算 法 对 舱 入 有 61 层 的 
限制 ， 应 该 注意 尽量 不 要 使 用 值 不 为 normal 的 unicode-bidi ， 除 非 
ae 








unicode-bidi 属性 虽然 很 有 意思 ， 但 是 改变 字符 的 呈现 顺序 往往 
ee 因此 ， 其 出 场 机 会 实际 上 要 比 direction 
低 一 些 ， 但 存在 即 有 价值 ， 总 会 有 场合 非常 适合 使 用 unicode-bidi 属 
性 的 。 





12.2 ”改变 CSS 世 界 纵横 规则 的 writing-mode 





writing-mode 这 个 CSS 属 性 ， 是 不 是 很 少见 到 、 很 少 用 到 ? 就 像 
我 们 将 不 常见 的 文字 称 为 “生僻 字 ” 一 样 ， 我 们 可 以 把 不 常见 的 CSS 属 性 
叫 作 “ 生 个 属 性 ”>。writing-mode 给 我 们 的 感觉 就 是 一 个 “生僻 属 
性 ”一 一 很 弱 ， 可 有 可 无 。 





但 是 实际 上 ， 我 们 都 错 了 ， 大 错 特 错 ! writing-mode 可 以 说 是 
CSS 世 界 里 面 最 强大 的 CSS 属 性 了 ， 它 是 本 书 最 后 出 场 的 大 嘿 ， 直 接 颠 
履 CSS 世 界 的 众多 规则 。 





writing-mode 之 所 以 给 人 “生僻 ”的 感觉 ， 是 有 原因 的 。 实 际 
上 writing-mode 这 个 CSS 属 性 很 早 就 诞生 了 ，IE5.5 浏 览 器 就 已 经 文 持 
上 


那 驶 奇怪 了 ! writing-mode 既然 这 么 厉害 ， 出 现 的 时 间 早 、 资 格 
老 ， 为 什么 一 直 沉 各 了 差不多 20 年 呢 ? 


那 是 因为 在 很 长 一 段 时 间 里 ，Firefox、Chrome 这 些 现代 浏览 器 都 不 
支持 writing-mode ，writing-mode 基本 上 就 是 正 浏览 器 的 私有 产 
物 。 很 多 人 对 正 一 直 没 什么 好 感 ， 对 吧 ? 由 此 及 彼 ， 自 然 对 writing- 
mode 也 不 待 见 。 


然而 ， 束 在 我 们 被 流行 前 端 技术 一 叶 蔽 目的 时 候 ， 各 大 现代 浏览 器 
纷纷 对 writing-mode 实现 了 更 加 标准 的 文 持 〈 主 要 得 益 于 Firefox 浏 览 
器 的 积极 跟 进 ) 。 也 就 是 说 ， 不 知 从 什么 时 候 起 ，writing-mode 的 兼 
容 性 已 经 不 成 问题 了 ， 加 上 该 属性 本 身 特 性 强大 一 一 我 仿佛 看 到 了 一 颗 
冉冉 升 起 的 新 星 一 一 不 对 ， 是 大 放 光 辉 的 圆 月 ! 








12.2.1 writing-mode 原本 的 作用 


和 float 属性 有 些 类 似 ，writing-mode 原本 是 为 控制 内 联 元 素 的 
显示 而 设计 的 《〈 即 所 谓 的 文本 布局 ) 。 因 为 在 亚洲 ， 尤 其 像 中国 这 样 的 
东亚 国家 ， 存 在 文字 的 排版 不 是 水 平 而 是 垂直 的 情况 ， 如 中 国 的 古诗 
文 ， 如 图 12-7 所 示 。 











过 民主 冯 喇 可 | | 
- 压 滥 详 于 东 册 询 
。 冲 辽 峻 才 晶 潭 可 
- 十 萤 | 妇 革 册 巾 


图 12-7 ”古诗 竖 版 示意 





因此 ，writing-mode 就 是 用 来 实现 文字 竖 向 呈现 的 。 
1. writing-mode 的 语法 


writing-mode 的 语法 学 习 要 求 比 其 他 CSS 属 性 要 高 一 些 ， 因 为 我 
们 需要 记 住 两 套 不 同 的 语法 : 一 个 是 下 私有 属性 ， 一 个 是 CSS3 规 范 属 
性 。 











先 看 一 下 未 来 所 需 的 CSS3 语 法 : 





/* 关键 字 值 */ 

writing-mode: horizontal-tb; /* 默认 值 */ 
writing-mode: vertical-rl; 

writing-mode: vertical-1r; 


/* 全 局 值 一 关键 字 inherit，IE8 及 以 上 版 本 浏览 器 文 持 ，initial 和 unset，IE13 才 文 持 
*/ 

writing-mode: inherit; 

writing-mode: initial; 

writing-mode: unset; 





我 们 通过 名 称 束 能 知道 各 个 关键 字 属 性 值 大 概 的 意思 。 人 例如， 默认 
值 horizontal-tb 表示 文本 流 是 水 平方 同 (horizontal 的， 元 素 是 从 
上 往 下 (top-bottom) 堆 著 的 。 





vertical-rl 表示 文本 是 垂直 方向 (vertical) 展示 ， 然 后 阅读 的 
顺序 是 从 右 往 左 〈right-left) ， 和 我 们 阅读 古诗 的 顺序 一 致 。 








vertical-lr 表示 文本 是 垂直 方向 〈vertical) 展示 ， 人 然后 阅读 的 
顺序 还 是 默认 的 从 左 往 右 (left-right) ， 即 仅仅 是 水 平 变 垂直 。 


图 12-8 给 出 了 各 个 值 下 的 中 英文 表现 的 对 照 〈 参 考 自 MDN) [1 。 


脑 

可 至 
康 % 2 
vertical-lr > 年 艺 
亿 会 
至 七 

ea 

vertical-rl > 机 

仁 


图 12-8 writing-mode 和 文本 展示 效果 示意 








下 面 来 看 一 下 老 I 下 浏览 器 的 语法 ， 由 于 历史 原因 ， 其 显得 相当 复 
杂 ， 正 官方 文档 显示 如 下 : 





-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | 
rl-bt | Lr 
| rl | tb 


[L 


根据 我 的 测试 〈 非 原生 IE8、IE9) ，-ms- 私有 前 绥 是 可 省 略 的 ， 
直接 用 writing-mode 所 有 正 浏 览 器 都 是 文 持 的 。 


正 浏览 器 下 的 关键 字 值 多 达 11 个 。 


lr-tb : 匡 7 及 以 上 版 本 浏览 喜 文 持 。 初 始 值 。 内 容 从 左 往 右 、 从 
上 往 下 水 平流 动 ， 并 且 下 一 行 水 平 元 素 在 上 一 行 元 素 的 下 面 ， 所 有 
符号 都 是 直立 定位 。 大 部 分 书写 系统 都 使 用 这 种 布局 。 

rl-tb : IE7 及 以 上 版 本 浏览 器 文 持 。 内 容 从 右 往 左 、 从 上 往 下 水 
平流 动 ， 并 且 下 一 行 水 平 元 素 在 上 一 行 元 素 的 下 面 ， 所 有 符号 都 是 
直立 定位 。 这 种 布局 适合 从 石 往 左 书写 的 语言 ， 如 阿拉 伯 语 、 希 但 
来 语 、 塔 安 那 文 和 叙利亚 语 。 

tb-rl : 下 7 及 以 上 版 本 浏览 器 文 持 。 内 容 从 上 往 下 、 从 右 往 左 垂 
直流 动 ， 下 一 个 垂直 行 定 位 于 前 一 个 垂直 行 的 左边 ， 全 角 符 号 直立 
定位 ， 非 全 角 符 号 《也 可 以 称 作 罕 拉 丁 文 或 者 罕 假 名 符号 ) 顺 时 针 
方 回旋 转 90*。 这 种 布局 多 见于 东亚 文字 排版 。 

bt-rl : IE7 及 以 上 版 本 浏览 器 文 持 。 内 容 从 下 往 上 、 从 右 往 左 垩 
直流 动 ， 下 一 个 垂直 行 定位 于 前 一 个 垂直 行 的 左边 ， 全 角 符 写 直 这 
定位 ， 非 全 角 符 号 〈 也 可 以 被 称 作 军 拉 丁 文 或 者 鹤 假 名 符号 ) 顺 时 
针 方向 旋转 90*。 此 布局 多 见于 东亚 垂直 排版 从 右 往 左 的 文本 块 
二 

tb-lr : 下 8 及 以 上 版 本 浏览 器 文 持 。 内 容 从 上 入 下、 从 左 往 右 垂 
直流 动 。 下 一 个 垂直 行 在 前 一 个 的 右边 。 

bt-lr : IE8 及 以 上 版 本 浏 贤 嚣 文 持 。 内 容 从 下 往 上 、 从 无 往 右 垩 



































直流 动 。 

。1r-bt : IE8 及 以 上 版 本 浏览 器 支持 。 内 容 从 下 往 上 、 从 左 往 右 水 
平 信 动 s 下 一 个 水 于 行 在 甫 一 行 的 上 面 。 

。rl-bt : IE8 及 以 上 版 本 浏览 器 文 持 。 内 容 从 下 往 上 、 从 右 往 左 水 
平 闹 动 。 

。1r : IE9 及 以 上 版 本 浏览 器 支持 。 在 SVG 和 HTML 元 素 上 使 用 。 等 
同 于 lr-tb。 

。 rl : IE9 及 以 上 版 本 浏览 器 支持 。 在 SVG 和 HTML 元 素 上 使 用 。 等 
同 于 rl1-tb 。 

。 tb : IE9 及 以 上 版 本 浏览 器 支持 。 在 SVG 和 HTML 元 素 上 使 用 。 等 
同 于 tb-rl 。 


各 个 属性 值 的 表现 如 图 12-9 所 示 (参考 微软 官网 )。 


DD 


Now 1s the time for all good men to 
come to the atd of theitr country. 


Now is the time for all good men to 
.Come to the aid of their country 


一 
= 
已 
a 
ty 
站 


come to the aid of their country. 
Now is the time for al good men to 


.Come to the aid of their country 
Now 1s the time for all good men to 





图 12-9 ”下 浏览 器 下 writing-mode 各 个 属性 值 表现 


补充 说 明 如 下 。 


相同 的 writing-mode 属性 值 并 不 会 累加 。 例 如 ， 如 果 父 子 元 素 均 
设置 了 writing- mode:tb-rl ， 只 会 泻 染 一 次 ， 子 元 素 并 不 会 两 
次 “旋转 ”。 

在 EE 浏览 器 下 ， 如 果 一 个 自 喘 具有 布局 的 元 素 〈 不 是 纯 文本 之 类 元 
素 ) writing-mode 属性 值 和 父 元 系 不 同 ， 那 么 当 子 元 系 的 布局 流 
变化 的 时 候 ， 其 父 元 素 坐 标 系 统 的 可 用 空间 会 被 充分 利用 。 这 段 文 
字 太 过 术语 化 ， 我 解释 一 下 就 是 : 在 正 浏览 器 下 ， 当 布局 元 素 从 水 
平 变 成 垂直 的 时 候 《〈 举 个 例子 ) ， 你 就 想象 为 元 素 在 垂直 方向 
是 166% 自 适 应 父 元 素 高 度 的 。 因 此 ，IE 浏 览 器 下 不 包括 Edge 13 
及 以 上 版 本 ) ， 元 素 vertical 流 的 时 候 你 会 发 现 高 度 高 得 吓人 ， 
布局 和 其 他 现代 浏览 器 不 一 样 ， 正 是 这 个 原因 。 

虽然 Chrome 和 Opera 认 识 tb-rl 等 老 的 于 属性 值 ， 但 也 仪 仪 是 认识 
而 已 ， 并 没有 任何 实际 效果 ! 


























2. 需要 关注 的 writing-mode 属性 值 


从 直接 开发 的 角度 而 言 ， 昌 然 正 支持 多 达 11 个 私有 的 属性 值 ， 但 是 


我 们 需要 关注 的 也 就 那么 几 个 。 完 竟 是 哪 几 个 呢 ? 


如 果 你 的 项 目 需要 兼容 了 正 7， 则 只 要 关注 两 个 就 可 以 了 ， 即 初始 


值 Ir-tb 和 tb-rl ， 对 应 于 CSS3 规 范 中 的 horizontal-tb 和 


vertical-rl。 


如 果 你 的 项 目 只 需要 兼容 IE8 及 以 上 版 本 浏览 右 ， 茶 喜 你 ， 你 可 以 








和 CSS3 规 范 属 性 完全 对 应 上 了 ， 而 且 IE8 下 的 writing-mode 要 比 IE7 强 
大 得 多 。 我 们 需要 关注 初始 值 ]r-tb 、tb-rl 和 tb-lr ， 分 别 对 应 于 
CSS3 中 的 horizontal-tb 、vertical-rl 和 vertical-1lr。 

















看 上 去 复杂 的 属性 是 不 是 变 得 很 简单 了 ? 重新 整理 出 一 个 实战 版 : 


writing-mode: lr-tb | tb-rl | tb-lr (IE8+) ; 


writing-mode: horizontal-tb | vertical-rl | vertical-lr; 








对 ， 大 家 只 要 记 住 上 面 这 几 个 束 可 以 了 ! 因为 所 谓 的 垂直 排版 ， 
际 Web 开 发 是 很 少 遇 到 的 。 





有 人 可 能 要 有 疑问 了 : 既然 writing-mode 实现 的 文本 垂直 排版 场 
景 有 限 ， 那 么 还 有 什么 学 习 的 意义 呢 ? 





前 面 也 提 到 了 ， 虽 然 创 造 writing-mode 的 本 意 是 文本 布局 ， 但 
是 ， 其 带 来 的 文档 流 回 的 改变 ， 不 仅 改 变 了 我 们 多 年 来 正常 的 CSS 认 
知 ， 同 时 可 以 巧妙 地 实现 很 多 意 想不到 的 需求 和 效果 。 





12.2.2 writing-mode 不 经 意 改 变 了 哪些 规则 


writing-mode 将 页 面 默认 的 水 平流 改 成 了 垂直 流 ， 题 履 了 我 们 以 
往 的 很 多 认 知 ， 基 于 原本 水 平方 同 才 适用 的 规则 全 部 都 可 以 在 垂直 方 问 
适用 ! 下 面 所 有 案例 均 使 用 如 下 CSS 代 码 : 


.Verticle-mode { 
writing-mode: tb-rl; 
-webkit-writing-mode: vertical-rl; 


writing-mode: vertical-rl; 


} 





1. 水 平方 向 也 能 margin 合并 


在 CSS2 的 规范 文档 中 有 这 么 一 句 话 : “The bottom margin of an in- 


flow block-level element always collapses with the top margin of its next in- 





flow block-level sibling, unless that sibling has clearance.” 其 清 清楚 楚 地 写 
着 bottom margin 和 top margin 会 合并 。 然 而 ， 这 是 CSS2 文 档 中 的 
描述 ， 在 CSS3 中 ， 由 于 writing-mode 的 存在 ， 这 种 说 法 就 不 严谨 了 ， 
而 应 该 是 对 垂直 流 方 向 的 margin 值 会 发 生 合并 。 换 句 话 说 ， 如 果 元 素 
是 默认 的 水 平流 ， 则 垂直 margin 会 合并 ; 如 果 元 素 是 垂直 流 ， 则 水 


平 margin 会 合并 。 








眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/12/2-1.php 或 者 扫 下 面 
的 二 维 码 。 结 果 如 图 12-10 所 示 。 





默认 流 -垂直 margin 合 并 


margin:20px; 
margin:20px; 


垂直 流 -水 平 margin 合 并 
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已 
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图 12-10 writing-mode 下 水 平 nargin 合并 
2. 普通 块 元 素 可 以 使 用 margin:auto 实现 垂直 居中 


我 们 应 该 知道 ， 默 认 的 Web 流 中 ，margin 设置 auto 值 的 时 候 ， 只 
有 水 平方 向 才 会 居中 ， 因 为 默认 width 是 196% 自 适 应 的 ，auto 才 有 计 
算 值 可 依 ， 而 在 垂直 方向 ，height 没有 任何 设置 的 时 候 高 度 绝 不 会 自 
动 和 父 级 高 度 一 致 ， 因 此 auto 没有 计算 空间 ， 于 是 无 法 实现 垂直 居 
中 。 但 是 ， 在 writing-mode 的 世界 里 ， 纵 横 规则 已 经 改变 ， 元 素 的 行 
为 表现 发 和 后 了 翻天 履 地 的 变化 。 





(1) 图 片 元 素 。 


我 们 先 来 看 一 下 ， 图 片 元 素 margin:auto 实现 垂直 居中 ， 手 动 输 
入 http://demo.cssworld.cn/12/2-2.php 或 者 扫 右 侧 的 二 维 码 。 其 中 图 片 的 
CSS 代 码 如 下 : 


img { 
display: block; 
margin-top: auto; margin-bottom: auto; 


} 








Firefox 浏 览 器 中 的 效果 如 图 12-11 所 示 。 但 是 ， 在 IE 浏 览 器 下 ， 却 
没有 垂直 居中 ， 如 图 12-12 所 示 。 





图 12-11 writing-mode 下 图 片 垂 直 居 中 效果 〈EFirefox 浏 览 器 ) 








如 管理 器 


图 12-12 writing-mode 下 图 片 并 未 垂直 居中 〈 正 浏览 器 ) 





奇怪 ? ! 难道 正 不 文 持 垂直 流下 的 垂直 居中 ? 非 也 ， 根 据 我 的 测 
试 ， 是 图 片 这 类 蔡 换 元 素 貌 似 不 行 ， 普 通 的 block 元 素 都 是 可 以 的 。 

(2) 普通 块 状元 素 。 

手动 输入 http://demo.cssworld.cn/12/2-3.php 或 者 扫 下 面 的 二 维 码 。 


此 时 ， 不 仅 IE11 Edge， 甚 至 IE8 浏 览 器 ， 都 垂直 居中 了 ， 如 图 12-13 上 所 
示 。 











芹 管理 器 
图 12-13 writing-mode 下 块 元 素 垂 直 居 中 1 〈 正 浏览 器 ) 
3. 可 以 使 用 text-align:center 实现 图 片 垂 直 居 中 
前 面 提 过 ，margin:auto 无 法 实现 正 浏览 器 下 的 图 片 垂直 居中 ， 
如 果 非 要 让 图 片 垂 直 居 中 ， 可 以 使 用 text-align:center ， 手 动 输入 


http://demo.cssworld.cn/12/2-4.php 或 者 扫 下 面 的 二 维 码 。 结 果 ， 之 前 病 
恢 恢 的 下 浏览 器 活 了， 如 图 12-14 所 示 。 








理 器 控制 台 调试 程序 写 C0”8 





图 12-14 writing-mode 下 块 元 素 垂 直 居 中 2 〈 正 浏览 器 ) 





4. 可 以 使 用 text-indent 实现 文字 下 沉 效 果 





这 是 个 真实 项 目的 例子 ， 要 增加 一 个 按钮 按 下 文字 下 沉 的 效果 。 如 
果 你 来 实现 ， 你 会 怎么 做 呢 ? 行 高 控制 ? 但 默认 文本 就 不 居中 (对 于 高 
度 自 适应 的 按钮 ，1ine-height 下 沉 是 为 了 避免 按钮 高 度 变化 ， 默 认 
是 不 能 完全 居中 的 ) 。padding+height 能 精确 控制 ， 又 略 烦 。 然 而 ， 
在 writing-mode 垂直 流下 ， 我 们 又 有 了 新 思路 ， 例 如 ， 直 接 使 
用 text-indent 实现 垂直 方向 的 控制 ， 没 想到 吧 ! 无 须 关 心 height 高 
度 、padding 间距 大 小 ， 任 何 按钮 都 可 以 通用 ， 因 为 text-indent 不 
会 影响 元 素 原 本 的 盒 布 局 。 





感 兴趣 的 读者 可 以 手动 输入 http://demo.cssworld.cn/12/2-5.php 或 者 
扫 右 侧 的 二 维 码 。 





核心 CSS 和 HTML 代 码 如 下 : 
.btn { 
} 
.btn:active { 
text-indent: 2px; 
} 
.Verticle-mode { 
writing-mode: tb-rl; 
writing-mode: vertical-rl; 


} 


<a href="javascript:" class="btn verticle-mode"> 领 </a> 











此 时 ， 点 击 这 个 按钮 的 时 候 ， 文 字 束 会 往 下 一 沉 ， 非 常 有 按 下 去 的 
感觉 ， 如 图 12-15 所 示 。 


u 


恭喜 你 中 了 88 元 红包 ! 





图 12-15 writing-mode 下 text-indent 实现 文字 下 沉 效 果 





为 什么 有 如 此 效果 呢 ? 这 要 归功 于 中 文 。 在 垂直 流 排版 的 时 候 ， 中 
文 不 会 旋转 ， 还 是 直立 的 。 也 就 是 说 ， 虽 然 肉 眼看 上 去 文字 没什么 变 
化 ， 但 是 布局 流 已 经 发 生 了 变化 ， 以 前 类 似 text-indent/letter- 
spacing 等 水 平 控制 属性 都 作用 在 垂直 方向 了 。 











当然 ， 这 个 例子 比较 巧 的 是 按钮 文字 只 有 一 个 ， 要 是 按钮 文字 有 多 
个 ， 怕 是 就 没 这 么 轻松 和 绝妙 了 。 


5. 可 以 实现 全 兼容 的 icon fonts 图 标的 旋转 效果 


在 老 的 正 浏 览 右 下 ， 我 们 要 实现 小 图 标的 旋转 效果 是 很 嘛 烦 的 ， 
为 要 使 用 下 的 旋转 或 翻转 滤 镜 什么 的 。 


有 了 writing-mode ， 在 有 些 场景 下 ， 我 们 就 不 用 这 么 态 烦 了 。 


前 面 你 可 能 也 注意 到 了 ， 当 writing-mode 把 文档 变 成 垂直 流 的 时 
修 ， 我 们 的 和 瑞 文 和 数字 符号 是 会 “ 喘 着 ”显示 的 ， 也 就 是 天 然 90° 旋 转 
了 。 此 时 ， 我 们 不 妨 脑 洞 大 开 一 下 : 假如 我 们 使 用 icon fonts 技 术 让 这 些 
字符 直接 映射 某 个 小 图 标 ， 那 则 不 是 轻 轻 松 松 承 可 以 实现 小 图 标 旋转 
了 ? 关键 在 于 ， 就 算是 IE6 和 IE7 浏 览 器 对 其 也 是 支持 的 ， 这 要 比 滤 镜 什 
么 的 简单 多 了 ! 











眼见 为 实 ， 手 动 输入 http://demo.cssworld.cn/12/2-6.php 或 者 扫 右 侧 
的 二 维 码 。 





核心 CSS 和 HTML 代 码 如 下 : 


@font-face { 
font-family: Arrow; 
src: url("/fonts/12/arrow.eot?"); 
src: local("Any"), 
url("/fonts/12/arrow.woff"); 
} 
.icon-play { 
font-family: Arrow; 


} 


.Verticle-mode { 
writing-mode: tb-rl; 
writing-mode: vertical-rl; 
} 
<span class="icon-play">r</span> 箭头 朝 右 
<span class="icon-play verticle-mode">r</span> 箭头 朝 下 





结果 如 图 12-16 所 示 。 


默认 流 
> 第 头 朝 右 
重 直 流 
Y 稍 头 朝 下 











图 12-16 writing-mode 下 兼容 的 字体 图 标 旋 转 效 果 





可 以 看 到 ， 虽 然 IE8 不 支持 transform ， 但 是 旋转 轻松 达成 。 











6. 充分 利用 高 度 的 高 度 自 适 应 布局 





当 文档 变 成 垂直 流 的 时 候 ，height 高 度 天 然 自 适应 ， 于 是 ， 我 们 
可 以 充分 利用 高 度 的 高 度 目 适应 布局 ,…… 突 然 发 现 ， 可 以 列举 的 案例 实 
在 太 多 了 ， 这 样 下 去 ， 本 书 没 法 完结 了 ， 所 以 往 下 的 案例 都 从 略 了 吧 。 








总 之 ， 理 论 上 讲 ， 有 了 writing-mode ， 我 们 能 够 做 的 事情 比 以 前 
多 了 很 多 。 就 介 想 不 到 ， 不 怕 做 不 到 。 





12.2.3 writing-mode 和 direction 的 关系 


writing-mode 、direction 和 unicode-bidi 是 CSS 世 界 中 三 大 
可 以 改变 文本 布局 流向 的 属性 ， 其 中 direction 和 unicode-bidi 属于 
近亲 ， 经 第 一 起 使 用 ， 也 是 仪 有 的 两 个 不 受 CSS3 的 all 属性 影响 的 CSS 
属性 ， 基 本 上 就 是 和 内 联 元 素 一 起 使 用 。 它 貌似 是 为 阿拉 伯 文 字 设 计 
的 。 











乍 一 看 ，writing-mode 似乎 包含 了 direction 和 unicode-bidi 
的 某 些 功能 和 行为 ， 例 如 ，vertical-rl 的 rl 和 direction 的 rtl 值 
有 相似 之 处 ， 都 是 从 右 往 左 。 然 而 ， 实 际 上 两 者 是 没有 交集 的 。 
为 vertical-rl 此 时 的 文档 流 为 垂直 方向 ，rl 表示 水 平方 向 ， 此 时 再 
设置 direction:rtl ， 实 际 上 值 rt1 改变 的 是 垂直 方向 的 内 联 元 素 的 
文本 方向 ， 一 横 一 纵 ， 没 有 交集 。 而 且 writing-mode 可 以 对 块 状元 素 
产生 影响 ， 直 接 改 变 了 CSS 世 界 的 纵横 规则 ， 要 比 direction 强大 得 











多 。 它 貌似 是 为 东亚 文字 设计 的 。 


然而 ，CSS 的 奇妙 之 处 就 在 于 : 茶 些 特性 当初 可 能 就 是 为 条 些 图 文 
排版 设计 的 ， 但 是 我 们 可 以 利用 它 融 来 的 特性 发 挥 自己 的 创造 力 ， 实 现 
其 他 很 多 意 想不到 的 效果 。 因 此 ， 上 面 出 现 的 “三 剑客 ”都 是 非常 好 的 资 


男 外 ，CSS 人 逻辑 属性 (也 就 是 -start/ -end 属性 ) 的 出 现 其 实 与 


现代 浏览 器 加 强 了 对 流 的 支持 有 关 ， 包 括 老 江湖 direction ， 以 及 最 近 
跟 进 的 writing-mode 。 


本 书 正文 部 分 到 此 为 止 ， 感谢 阅读 ! 





[1] 大 家 会 发 现 瑞 文字 符 横 过 来 了 ， 可 以 试 试 使 用 text- 
orientation:upright 让 其 直立 ，IE 不 支持 ，Firefox 和 Chrome 支 持 。 


欢迎 来 到 异步 社区 ! 


异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn) 是 人 民 邮 电 出 版 社 旗 下 IT 专 业 图 书 旗 
舰 社 区 ， 于 2015 年 8 月 上 线 运营 。 


异步 社区 依托 于 人 民 邮 电 出 版 社 20 余 年 的 开 专 业 优 质 出 版 资源 和 编 
辑 策 划 团 队 ， 打 造 传统 出 版 与 电子 出 版 和 目 出 版 结合 、 纸 质 书 与 电子 书 
结合 、 传 统 印 刷 与 POD 按 需 印 刷 结合 的 出 版 平 合 ， 提 供 最 新 技术 资讯 ， 
为 作者 和 读者 打造 交流 互动 的 平台 。 








[ | 次 技能 Q| 四 后 只 (0) 埋 通 和 区 


亲征 洒水 


社区 Ul 全 新 改版 ， 新 新 面 胃 迎 接 20171 为 答谢 社区 用 户 


即日 起 到 ‘em WW Wy -二 二 [二 4 二 
1 月 26 号 全 场 电子 PB8 打 优 患 ! 
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人 区 


购买 图 书 


我 们 出 版 的 图 书 涵盖 主流 I 技术 ， 在 编程 语言 、Web 技 术 、 数 据 科 
学 等 领域 有 众多 经 典 畅销 图 书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 
400 多 种 ， 部 分 新 书 实 现 纸 书 、 电 子 书 同步 出 版 。 我 们 还 会 定期 发 布 新 
书 书 讯 。 


下 载 资 源 








社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 程序 源 代 码 。 


另外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 注册 成 为 社区 用 户 束 
可 以 免费 下 载 。 


与 作 译 者 互动 


很 多 图 书 的 作 译 者 已 经 入 驻 社 区 ， 您 可 以 关注 他 们 ， 咨 询 技 术 问 
题 ， 可 以 阅读 不 断 更 新 的 技术 文章 ， 听 作 译 者 和 编辑 畅 聊 好 书 背 后 有 趣 
的 故事 ， 还 可 以 参与 社区 的 作者 访谈 栏目 ， 回 您 关注 的 作者 提出 采访 题 
日。 





灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 纸 质 图 书 直 接 从 人 民 
邮电 出 版 社 书 库 发 货 ， 电 子 书 提 供 多 种 阅读 格式 。 


对 于 重 傍 新 书 ， 社 区 提供 预 售 和 新 书 首 发 服务 ， 用 尸 可 以 第 一 时 间 
买 到 心仪 的 新 书 。 





用 户 帐 户 中 的 积分 可 以 用 于 购书 优惠 。100 积 分 =1 元 ， 购 买 图 书 
时 ， 在 ”到 里 填 入 可 使 用 的 积分 数值 ， 即 可 扣 减 相应 金额 。 
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购买 本 电子 书 的 读者 专 享 异步 社区 优惠 券 。 使 用 方法 : 注册 成 为 社区 用 户 ， 在 下 单 购书 
时 输入 “57AWG”， 然 后 点 击 “ 使 用 优惠 码 ” 即 可 享受 电子 书 8 折 优 惠 ( 本 优惠 券 只 可 使 用 一 
次 ) 。 



































纸 电 图 书 组 合 购买 


社区 独家 提供 纸 质 图 书 和 电子 书 组 合 购买 方式 ， 价 格 优惠 ， 一 次 购 
买 ， 多 种 阅读 选择 。 
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Wireshark 旦 当 阴 最 流行 的 网 络 包 分 析 工具 。 它 上 手 篇 单 ， 无需 培训 就 可 入 


顽 手 的 网 塔 问题 昌 到 Wireshark 都 能 迎刃而解 . 1.0K 既 验 值 
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社区 里 还 可 以 做 什么 


提交 勘误 


您 可 以 在 图 书页 面 下 方 提交 勘误 ， 每 条 勘误 被 确认 后 可 以 获得 100 
积分 。 热 心 勘 误 的 读者 还 有 机 会 参与 书稿 的 审 校 和 翻译 工作 。 





写作 
社区 提供 基于 Markdown 的 写作 环境 ， 喜 欢 写作 的 您 可 以 在 此 一 试 


身手 ， 在 社区 里 分 享 您 的 技术 心得 和 读书 体会 ， 更 可 以 体验 上 自 出 版 的 乐 
趣 ， 轻 松 实现 出 版 的 梦想 。 


如 果 成 为 社区 认证 作 译 者 ， 还 可 以 享受 异步 社区 提供 的 作者 专 至 特 
色 服 务 。 


会 议 活动 早 知道 
您 可 以 掌握 IT 圈 的 技术 会 议 资 讯 ， 更 有 机 会 免费 获 赠 大 会 门票 。 
Js 


扫描 任意 二 维 码 都 能 找到 我 们 : 





异步 社区 

















QQ 群 ，436746675 


社区 网 址 : www.epubit.com.cn 
官方 微 信 : 异步 社区 


官方 微 博 : @ 人 邮 寞 步 社 区 ，@ 人 民 邮 电 出 版 社 -信息 技术 分 社 


投稿 长 咨询 : contact@epubit.com.cn 


